511 字
2 分钟阅读
Javascript – DOM
简介
Javascript DOM
代码演示
<html>
<head>
<title>Javascript DOM</title>
</head>
<body>
<div>
<p id = "p1">这是一个段落</p>
<p id = "p2">这是二个段落</p>
</div>
<script>
// DOM 对象
// DOM 对象是 Javascript 对象的子集
// DOM 对象是 HTML 文档的接口
// DOM 对象是 HTML 文档的树结构
// 通过 DOM 修改 HTML 文档
// 分为两种步骤
// 1. 获取对应的DOM对象
// 2. 通过DOM对象的属性或方法修改
// 1. 获取对应的DOM对象
let p1 = document.querySelector('#p1');
// 2. 通过DOM对象的属性或方法修改
p1.innerHTML = '这是修改后的段落';
// 获取多个DOM对象 querySelectorAll
// 得到的是一个NodeList节点集合，是一个伪数组（有长度、有索引的数组）
// 伪数组不能使用数组的方法
let ps = document.querySelectorAll('p');
ps[1].style.color = 'red';
</script>
</body>
</html>效果
