JavaScript 操作 DOM

写在前面

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；

• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；

• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；

• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点：

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByClassName()

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点；document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

---

1. 更新DOM

可以直接修改节点的文本，方法有两种：

• 修改innerHTML属性
  这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

• 修改innerText或textContent属性
  可以自动对字符串进行HTML编码，保证无法设置任何HTML标签

2. 插入DOM

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点：

• appendChild，把一个子节点添加到父节点的最后一个子节点。

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<!--把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：-->
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

• appendChild，从零创建一个新的节点，然后插入到指定位置。

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<!--createElement()重新创建一个新的节点并添加-->
var list = document.getElementById('list')；
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

• insertBefore，要把子节点插入到指定的位置

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<!-- parentElement.insertBefore(newElement, referenceElement); -->
var list = document.getElementById('list');
var ref = document.getElementById('python');
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<!-- 重点：拿到一个“参考子节点”的引用 -->
var i, c；
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
}

3. 删除DOM

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

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true 删除后的节点不在文档树中，但其实还在内存中，可以时再次被添加到别的位置。