JavaScript复习笔记 （七）浏览器DOM

HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
document对象就是整个DOM树的根节点

一、获取DOM节点

根节点Document已经自动绑定为全局变量document

1. document.getElementById()
2. document.getElementsByTagName()
3. document.getElementsByClassName()

// 返回ID为'test'的节点：
var test = document.getElementById('test');
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
1
2
3
4
5
6
7

4. querySelector()
5. querySelectorAll()
   【 低版本的IE<8不支持 】

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');
1
2
3
4

二、更新DOM

1️⃣ 修改innerHTML属性
替换掉原来的节点

// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
1
2
3
4

【 如果写入的字符串是通过网络拿到的，要注意对字符编码来避免XSS攻击。 】

2️⃣ 修改innerText或textContent属性
只设置文本
【 innerText不返回隐藏元素的文本，而textContent返回所有文本。另外IE<9不支持textContent 】

3️⃣ 修改CSS：style属性
DOM节点的style属性对应所有的CSS，可以直接获取或设置。
CSS名称在JavaScript中改写为驼峰式命名。

p.style.color = '#ff0000';
p.style.fontSize = '20px';
1
2

三、插入DOM

1. appendChild ： 把一个子节点添加到父节点的最后一个子节点

动态创建一个节点然后添加到DOM树中：

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
1
2
3
4

2. insertBefore：插入到指定位置

parentElement.insertBefore(newElement, referenceElement);：插入到referenceElement之前

3. 循环所有子节点：迭代children属性

var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
}
1
2
3
4
5
6

四、删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
1
2
3
4
5
6
7

• 删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
• children属性是一个只读属性，并且它在子节点变化时会实时更新。