JavaScript 操作文档对象模型 (DOM)
基本概念
DOM 是 JavaScript 操作网页的接口,全称为文档对象模型(Document Object Model)。 它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本对树形文档进行各种操作。
节点
- DOM 的最小组成单位叫做节点 (node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。
- 最顶层的节点是 document 节点,它代表了整个文档、是文档的根节点。
- 每张网页都有自己的 document 节点,window.document 指向这个节点。
- 文档里面最高一层一般是HTML标签,其他HTML标签节点都是它的下级。
除了根节点以外,其他节点对于周围的节点都存在三种关系:
- 父节点关系 (parentNode),直接的那个上级节点;
- 子节点关系 (childNodes),直接的下级节点;
- 同级节点关系 (sibling),拥有同一个父节点的节点;
查找节点
要具体找到某个节点,可以使用 document 提供的一系列方法。
getElementsByTagName()
- 参数是标签名;返回所有指定 HTML 标签的元素。
var p = document.getElementsByTagName('p');
p[3].style.background = 'red';
getElementsByClassName()
- 参数为标签的 class 属性的值返回所有 class 名字符合指定条件的元素。
var p = document.getElementsByClassName('p');
p[1].style.background = 'yellow';
getElementsByName()
- 参数为标签的 name 属性的值;选择拥有 name 属性的 HTML 元素。
var p = document.getElementsByName('p');
p[0].style.background = 'yellow';
getElementById()
- 参数为标签的id属性的值,参数大小写敏感;返回匹配指定id属性的元素节点;没有发现匹配的节点,返回null。
var p = document.getElementById('p');
p.style.background = 'yellow';
querySelector()
- document.querySelector 方法接受一个
CSS选择器
作为参数; - 如果有多个节点满足匹配条件,则返回第一个匹配的节点;
- 如果没有发现匹配的节点,则返回null;
var p = document.querySelector('.p');
p.style.background = 'yellow';
querySelectorAll()
- document.querySelectorAll 方法与 querySelector 用法类似,
- 区别是返回一个类似数组的 HTMLCollection 对象,包含所有匹配给定选择器的节点。
- 多个参数值,使用(英文逗号
,
)隔开;
var p = document.querySelectorAll('i,.p');
for(var i = 0; i < p.length; i++){
p[i].style.background = 'yellow';
}
//选中 id 属性值为p1的元素
var p = document.querySelectorAll('[id="p1"]');
//选中div元素的class属相值为p的元素
var p = document.querySelectorAll('div.p');
//选中所有的p标签,但是class值为p的除外
var p = document.querySelectorAll('p:not(.p)');
for(var i=0;i<p.length;i++){
p[i].style.background = 'yellow';
}
querySelector 不支持CSS伪元素选择器(如 :first-line 和 :first-letter)和伪类选择器(如 :link和 :visited),即无法选中伪元素和伪类。
案例
循环批量事件
<body>
<input type="button" value="起床了" > <br>
<input type="button" value="起床了" > <br>
<input type="button" value="起床了" > <br>
<input type="button" value="起床了" > <br>
<input type="button" value="起床了" > <br>
<input type="button" value="起床了" > <br>
</body>
<script>
var inps = document.querySelectorAll('input');
for(var k in inps){
inps[k].onclick = function(){
if(this.value == '起床了'){
for(var i=0;i<inps.length;i++){
inps[i].value = '睡觉了';
}
this.value = '起床了';
}else{
for(var i=0;i<inps.length;i++){
inps[i].value = '起床了';
}
this.value = '睡觉了';
}
}
}
</script>
点击按钮设置随机背景颜色
<body>
<div style="width: 100px; height: 100px; border: 1px solid red"></div>
</body>
<script>
document.getElementsByTagName('div')[0].onclick = function(){
this.style.width = parseInt(this.style.width) + 10 + 'px';
this.style.height = parseInt(this.style.height) + 10 + 'px';
var rgb = Math.floor(Math.random()*(256 - 0) + 0) + ',';
rgb += Math.floor(Math.random()*(256 - 0) + 0) + ',';
rgb += Math.floor(Math.random()*(256 - 0) + 0);
this.style.background = 'rgb('+ rgb +')';
}
</script>