探索JavaScript之DOM的世界

1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”?，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，計(jì)有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁使用非微軟平臺(tái)及瀏覽器無法正常顯示。DOM即是當(dāng)時(shí)蘊(yùn)釀出來的杰作?，F(xiàn)在我們就來一起了解一下關(guān)于JavaScript-DOM的世界。

?

DOM的增加

DOM操作中增指的是增加節(jié)點(diǎn)，分為兩部分：創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)。

創(chuàng)建節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn)中常用的API方法主要有：

1.?document.createElement()：創(chuàng)建指定的HTML元素

2.?document.createTextNode()：創(chuàng)建文本節(jié)點(diǎn)

3.?document.createDocumentFrame()：創(chuàng)建文檔片段

4.?document.createAttribute()：創(chuàng)建節(jié)點(diǎn)屬性

5.?node.cloneNode()：克隆節(jié)點(diǎn)

插入節(jié)點(diǎn)###

插入節(jié)點(diǎn)常用的API方法主要有：

1.?node.appendChild()：末尾追加一個(gè)新節(jié)點(diǎn)

2.?node.insertBefore()：插入一個(gè)新節(jié)點(diǎn)

<div id="div1"><p id="p1">這是一個(gè)段落</p><p id="p2">這是另一個(gè)段落</p></div>

<script>var para=document.createElement("p");var node=document.createTextNode("這是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);</script>

例子解釋：

這段代碼創(chuàng)建新的 <p>元素：

?var?para=document.createElement("p");

如需向 <p>元素添加文本，您必須首先創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建了一個(gè)文本節(jié)點(diǎn)：

var?node=document.createTextNode("這是新段落。");

然后您必須向 <p>元素追加這個(gè)文本節(jié)點(diǎn)：

para.appendChild(node);

最后您必須向一個(gè)已有的元素追加這個(gè)新元素。
這段代碼找到一個(gè)已有的元素：

var?element=document.getElementById("div1");

這段代碼向這個(gè)已有的元素追加新元素：

element.appendChild(para);

關(guān)于document.createAttribute()

document.createAttribute()?方法創(chuàng)建并返回一個(gè)新的屬性節(jié)點(diǎn)。但是這個(gè)方法不是很常用，如果涉及到創(chuàng)建屬性，一般使用node.setAttribute()?。

<div id="div1">

<p id="p1">這是一個(gè)段落</p>

<p id="p2">這是另一個(gè)段落</p>

</div>

var?node = document.getElementById('div1'); var?newAttr = document.createAttribute('title'); ?//創(chuàng)建一個(gè)新的title屬性；

?

newAttr .nodeValue = 'Hello world!'; ?//title屬性的值是：Hello world!

node.setAttributeNode(attr); //運(yùn)用到對(duì)應(yīng)的元素節(jié)點(diǎn)上

關(guān)于node.cloneNode()

node.cloneNode(deep)?方法返回該節(jié)點(diǎn)的一個(gè)副本，deep?可選，表明是否采用深度克隆，如果為true?，則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆，否則，只克隆該節(jié)點(diǎn)本身。

<div id="div1">

<p id="p1">這是一個(gè)段落</p>

<p id="p2">這是另一個(gè)段落</p>

</div>

var?node = document.getElementById('div1');var?cloneNode = node.cloneNode(true); //克隆div1整個(gè)節(jié)點(diǎn)；

?

cloneNode.id = "div2"; //修改克隆的節(jié)點(diǎn)id名稱為div2；

document.body.appendChild(cloneNode); //在網(wǎng)頁中追加克隆的節(jié)點(diǎn)；

DOM的刪除

DOM節(jié)點(diǎn)的刪除主要API是node.removeChild();可以使用parentNode.removeChild(child)刪除指定父節(jié)點(diǎn)parentNode的一個(gè)子節(jié)點(diǎn)child，并返回被刪除的節(jié)點(diǎn)。

注意事項(xiàng)：這個(gè)方法是要在被刪除的節(jié)點(diǎn)的父節(jié)點(diǎn)上調(diào)用的，而不是在被刪除節(jié)點(diǎn)上調(diào)用的，如果參數(shù)節(jié)點(diǎn)不是當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，removeChild?方法將報(bào)錯(cuò)。

<div id="div1"><p id="p1">這是一個(gè)段落。</p><p id="p2">這是另一個(gè)段落。</p></div>

<script>var parent=document.getElementById("div1");var child=document.getElementById("p1");

parent.removeChild(child);</script>

例子解釋：

這個(gè) HTML 文檔含有擁有兩個(gè)子節(jié)點(diǎn)（兩個(gè)<p>元素）的 <div>?元素：

<div id="div1"><p id="p1">這是一個(gè)段落。</p><p id="p2">這是另一個(gè)段落。</p></div>

找到 id="div1"的元素：

var?parent=document.getElementById("div1");

找到id="p1" 的?<p> 元素：

var?child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

DOM的修改

修改節(jié)點(diǎn)常用的API方法主要有：

1.?appendChild()：末尾追加一個(gè)新節(jié)點(diǎn)

2.?insertBefore()：插入一個(gè)新節(jié)點(diǎn)

3.?replaceChild()：替換節(jié)點(diǎn)

注意事項(xiàng)：以上幾個(gè)方法都是操作的某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，也就是說，要使用這幾個(gè)方法必須先取得父節(jié)點(diǎn)。另外并不是所有節(jié)點(diǎn)都有子節(jié)點(diǎn)，如果在不支持子節(jié)點(diǎn)的節(jié)點(diǎn)上，調(diào)用了這些方法，將會(huì)導(dǎo)致錯(cuò)誤。

DOM的查找

DOM節(jié)點(diǎn)中的查主要包括：查找元素和節(jié)點(diǎn)查找。

查找元素

1.?getElementById()?--- 通過ID訪問；

2.?getElementsByClassName()?--- 通過類名訪問；

3.?getElementsByTagName()?--- 通過標(biāo)簽名稱訪問；

4.?querySelector()?--- 通過CSS選擇器訪問（單個(gè)）；

5.?querySelectorAll()?--- 通過CSS選擇器訪問 （所有）；

關(guān)于這一節(jié)的內(nèi)容，可以訪問上一篇文章：JavaScript-DOM訪問方式

節(jié)點(diǎn)查找

所有的節(jié)點(diǎn)都有這些屬性，都是可以用于訪問相關(guān)的node節(jié)點(diǎn)：

1.?Node.childNodes: 訪問一個(gè)單元素下所有的直接子節(jié)點(diǎn)元素，可以是一個(gè)可循環(huán)的類數(shù)組對(duì)象。該節(jié)點(diǎn)集合可以保護(hù)不同的類型的子節(jié)點(diǎn)（比如text節(jié)點(diǎn)或其他元素節(jié)點(diǎn)）。

2.?Node.firstChild: 與childNodes數(shù)組的第一個(gè)項(xiàng)(Element.childNodes[0])是同樣的效果，僅僅是快捷方式。

3.?Node.lastChild: 與childNodes數(shù)組的最后一個(gè)項(xiàng)(Element.childNodes[Element.childNodes.length-1])是同樣的效果，僅僅是快捷方式。

4.?Node.parentNode: 訪問當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，父節(jié)點(diǎn)只能有一個(gè)，祖節(jié)點(diǎn)可以用Node.parentNode.parentNode?的形式來訪問。

5.?Node.nextSibling: 訪問DOM樹上與當(dāng)前節(jié)點(diǎn)同級(jí)別的下一個(gè)節(jié)點(diǎn)。

6.?Node.previousSibling: 訪問DOM樹上與當(dāng)前節(jié)點(diǎn)同級(jí)別的上一個(gè)節(jié)點(diǎn)。

總結(jié)

?

這些就是本期進(jìn)行的dom的增、刪、改、查操作，當(dāng)然可能并不夠全面，還有很多細(xì)節(jié)需要大家繼續(xù)研究，如果大家對(duì)此感興趣的話，不妨關(guān)注我們，接下來還有更多的內(nèi)容會(huì)和大家分享。