寫在前面

由于HTML文檔被瀏覽器解析后就是一棵DOM樹，要改變HTML的結(jié)構(gòu)，就需要通過JavaScript來操作DOM。始終記住DOM是一個樹形結(jié)構(gòu)。操作一個DOM節(jié)點(diǎn)實(shí)際上就是這么幾個操作：

• 更新：更新該DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于更新了該DOM節(jié)點(diǎn)表示的HTML的內(nèi)容；

• 遍歷：遍歷該DOM節(jié)點(diǎn)下的子節(jié)點(diǎn)，以便進(jìn)行進(jìn)一步操作；

• 添加：在該DOM節(jié)點(diǎn)下新增一個子節(jié)點(diǎn)，相當(dāng)于動態(tài)增加了一個HTML節(jié)點(diǎn)；

• 刪除：將該節(jié)點(diǎn)從HTML中刪除，相當(dāng)于刪掉了該DOM節(jié)點(diǎn)的內(nèi)容以及它包含的所有子節(jié)點(diǎn)。

在操作一個DOM節(jié)點(diǎn)前，我們需要通過各種方式先拿到這個DOM節(jié)點(diǎn)：

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

由于ID在HTML文檔中是唯一的，所以document.getElementById()可以直接定位唯一的一個DOM節(jié)點(diǎn)；document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節(jié)點(diǎn)。要精確地選擇DOM，可以先定位父節(jié)點(diǎn)，再從父節(jié)點(diǎn)開始選擇，以縮小范圍。

1. 更新DOM

可以直接修改節(jié)點(diǎn)的文本，方法有兩種：

• 修改innerHTML屬性
  這個方式非常強(qiáng)大，不但可以修改一個DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹

• 修改innerText或textContent屬性
  可以自動對字符串進(jìn)行HTML編碼，保證無法設(shè)置任何HTML標(biāo)簽

2. 插入DOM

如果這個DOM節(jié)點(diǎn)是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于“插入”了新的DOM節(jié)點(diǎn)。
如果這個DOM節(jié)點(diǎn)不是空的，那就不能這么做，因?yàn)閕nnerHTML會直接替換掉原來的所有子節(jié)點(diǎn)。

有兩個辦法可以插入新的節(jié)點(diǎn)：

• appendChild，把一個子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)。

<!-- HTML結(jié)構(gòu) -->
<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">的最后一項(xiàng)：-->
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);

<!-- HTML結(jié)構(gòu) -->
<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，從零創(chuàng)建一個新的節(jié)點(diǎn)，然后插入到指定位置。

<!-- HTML結(jié)構(gòu) -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<!--createElement()重新創(chuàng)建一個新的節(jié)點(diǎn)并添加-->
var list = document.getElementById('list')；
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

<!-- HTML結(jié)構(gòu) -->
<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，要把子節(jié)點(diǎn)插入到指定的位置

<!-- HTML結(jié)構(gòu) -->
<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結(jié)構(gòu) -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<!-- 重點(diǎn)：拿到一個“參考子節(jié)點(diǎn)”的引用 -->
var i, c；
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i個子節(jié)點(diǎn)
}

3. 刪除DOM

要刪除一個節(jié)點(diǎn)，首先要獲得該節(jié)點(diǎn)本身以及它的父節(jié)點(diǎn)，然后，調(diào)用父節(jié)點(diǎn)的removeChild把自己刪掉：

// 拿到待刪除節(jié)點(diǎn):
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點(diǎn):
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
removed === self; // true 刪除后的節(jié)點(diǎn)不在文檔樹中，但其實(shí)還在內(nèi)存中，可以時再次被添加到別的位置。