JavaScript 操作 DOM

寫在前面

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

更新：更新該DOM節(jié)點的內(nèi)容偶摔，相當(dāng)于更新了該DOM節(jié)點表示的HTML的內(nèi)容；
遍歷：遍歷該DOM節(jié)點下的子節(jié)點促脉，以便進行進一步操作辰斋；
添加：在該DOM節(jié)點下新增一個子節(jié)點策州，相當(dāng)于動態(tài)增加了一個HTML節(jié)點；
刪除：將該節(jié)點從HTML中刪除宫仗，相當(dāng)于刪掉了該DOM節(jié)點的內(nèi)容以及它包含的所有子節(jié)點够挂。

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

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

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

1. 更新DOM

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

修改innerHTML屬性
這個方式非常強大罪既，不但可以修改一個DOM節(jié)點的文本內(nèi)容铸题，還可以直接通過HTML片段修改DOM節(jié)點內(nèi)部的子樹
修改innerText或textContent屬性
可以自動對字符串進行HTML編碼，保證無法設(shè)置任何HTML標(biāo)簽

2. 插入DOM

如果這個DOM節(jié)點是空的琢感，例如丢间，<div></div>，那么驹针，直接使用innerHTML = '<span>child</span>'就可以修改DOM節(jié)點的內(nèi)容烘挫，相當(dāng)于“插入”了新的DOM節(jié)點。
如果這個DOM節(jié)點不是空的柬甥，那就不能這么做饮六，因為innerHTML會直接替換掉原來的所有子節(jié)點。

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

appendChild苛蒲，把一個子節(jié)點添加到父節(jié)點的最后一個子節(jié)點卤橄。

<!-- 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">的最后一項：-->
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é)點臂外，然后插入到指定位置窟扑。

<!-- 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é)點并添加-->
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é)點插入到指定的位置

<!-- 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>

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

3. 刪除DOM

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者