在交互網(wǎng)頁(yè)中,我們需要?jiǎng)討B(tài)地添加一些對(duì)象,例如:如用戶鼠標(biāo)移到某處,出現(xiàn)相應(yīng)提示或?qū)υ?類似于這樣的功能,網(wǎng)站開發(fā)人員肯定需要添加元素,我們常用的是appendChild(),接下來(lái)南昌網(wǎng)站設(shè)計(jì)公司技術(shù)人員對(duì)大家詳細(xì)介紹.

DOM提供了一些操作節(jié)點(diǎn)的方法。其中，最常用的方法是appendChild()，用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)。添加節(jié)點(diǎn)后，childNodes的新增節(jié)點(diǎn)、父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。更新完成后，appendChild()返回新增的節(jié)點(diǎn)。來(lái)看下面的例子：

var returnedNode=someNode.appendChild (newNode);

alert (returnedNode==newNode); //true

alert( someNode.las tChild==newNode); //true

如果傳人到appendChild()中的節(jié)點(diǎn)已經(jīng)是文檔的一部分了，那結(jié)果就是將該節(jié)點(diǎn)從原來(lái)的位置轉(zhuǎn)移到新位置。即使可以將DOM樹看成是由一系列指針連接起來(lái)的，但任何DOM節(jié)點(diǎn)也不能同時(shí)出現(xiàn)在文檔中的多個(gè)位置上。因此，如果在調(diào)用appendChild()時(shí)傳人了父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，那么該節(jié)點(diǎn)就會(huì)成為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如下面的例子所示：

var returnedNode=someNode.appendChild(someNode.firstChild);

alert( returnedNode==someNode.firs tChild); //false

alert(returnedNode==someNodelastChild); //true

如果需要把節(jié)點(diǎn)放在childNodes列表中某個(gè)特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。這個(gè)方法接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。插入節(jié)點(diǎn)后，被插入的節(jié)點(diǎn)會(huì)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)(previousSibling)，同時(shí)被方法返回。如果參照節(jié)點(diǎn)是null，則insertBefore()與appendChild()執(zhí)行相同的操作，如下面的例子所示：

//插入后成為最后一個(gè)子節(jié)點(diǎn)

returnedNode=someNode.insertBefore (newNode, null);

alert(newNode==someNode.lastChild); //true

//插入后成為第一個(gè)了節(jié)點(diǎn)

var returnedNode=someNode.insertBefore (newNode, someNode.firstChild);

alert(re七urnedNode==newNode); //true

alert(newNode==someNode.firstChild); //true

//插入到最后一個(gè)子節(jié)點(diǎn)前面

returnedNode:someNode.insertBefore(newNode, someNode.lastChild);

alert(newNode==someNode.childNodes(someNode.childNodes.length-2]);//true

前面介紹的appendChild()和insertBefore()方法都只插入節(jié)點(diǎn)，不會(huì)移除節(jié)點(diǎn)。而下面要介紹的replaceChild()方法接受的兩個(gè)參數(shù)是：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。要替換的節(jié)點(diǎn)將由這.

方法返回并從文檔樹中被移除，同時(shí)由要插入的節(jié)點(diǎn)占據(jù)其位置。來(lái)看下面的例子：

//替換第一個(gè)子節(jié)點(diǎn)

var returnedNode=someNode.replaceChild(newNode, someNode.firstChild);

//替換最后一個(gè)子節(jié)點(diǎn)

returnedNode=someNode.replaceChild (newNode, someNode.lastChild);

在使用replaceChild()插入一個(gè)節(jié)點(diǎn)時(shí)，該節(jié)點(diǎn)的所有關(guān)系指針都會(huì)從被它替換的節(jié)點(diǎn)復(fù)制過(guò)盡管從技術(shù)上講，被替換的節(jié)點(diǎn)仍然還在文檔中，但它在文檔中已經(jīng)沒有了自己的位置。

如果只想移除而非替換節(jié)點(diǎn)，可以使用removeChild()方法。這個(gè)方法接受一個(gè)參數(shù)，即要移除節(jié)點(diǎn)。被移除的節(jié)點(diǎn)將成為方法的返回值，如下面的例子所示：

//移除第一個(gè)子節(jié)點(diǎn)

var formerFirstChild=someNode.removeChild( someNode.firstChild);

//移除最后一個(gè)子節(jié)點(diǎn)

var formerLastChild=someNode.removeChild( someNode.las tChild);

與使用replaceChild()方法一樣，通過(guò)removeChild()移除的節(jié)點(diǎn)仍然為文檔所有，只不過(guò)在文檔中已經(jīng)沒有自己的位置。

前面介紹的四個(gè)方法操作的都是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，也就是說(shuō)，要使用這幾個(gè)方法必須先取得父節(jié)點(diǎn)(使用parentNode屬性)。另外，并不是所有類型的節(jié)點(diǎn)都有子節(jié)點(diǎn)，如果在不支持子節(jié)點(diǎn)的節(jié)點(diǎn)上調(diào)用了這些方法，將會(huì)導(dǎo)致錯(cuò)誤發(fā)生。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://www.gimmickmag.com 如轉(zhuǎn)載請(qǐng)注明出處!