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

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

var returnedNode=someNode.appendChild (newNode);

alert (returnedNode==newNode); //true

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

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

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

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

alert(returnedNode==someNodelastChild); //true

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

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

returnedNode=someNode.insertBefore (newNode, null);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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