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 删除后的节点不在文档树中，但其实还在内存中，可以时再次被添加到别的位置。
