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

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

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)從原來的位置轉(zhuǎn)移到新位置。即使可以將DOM樹看成是由一系列指針連接起來的，但任何DOM節(jié)點(diǎn)也不能同時出現(xiàn)在文檔中的多個位置上。因此，如果在調(diào)用appendChild()時傳人了父節(jié)點(diǎn)的第一個子節(jié)點(diǎn)，那么該節(jié)點(diǎn)就會成為父節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)，如下面的例子所示：

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

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

alert(returnedNode==someNodelastChild); //true

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

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

returnedNode=someNode.insertBefore (newNode, null);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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