JavaScript 替換節(jié)點

■知識點

replaceChildO方法可以將某個子節(jié)點替換為另一個。其用法如下：

    nodeObject.replaceChild(new_node,old_node)

其中，參數(shù)new_node為指定新的節(jié)點，old_node為被替換的節(jié)點。如果替換成功，則返回被替換的節(jié)點；如果替換失則返回null。

■實例設計

【示例1】重寫腳本，新建一個二級標題元素，并替換掉紅盒子中的一級標題元素。

var ok = document.getElementByld("ok") ;                        //獲取按鈕素的引用

ok.onclick = function(){                                                        //為按鈕注冊一個鼠標單擊事件處理函數(shù)

    var red = document.getElementByld ("red") ;                   //獲取紅盒子的引用

    var h1 = document.getElementsByTagName ("h1"）[0];  //獲取一級標題的引用 

    var h2 = document.createElement ("h2");                        //創(chuàng)建二級標題兀素，并引用

    red. replaceChild (h2, h1);                                                //把一級標題替換為二級標題

}

    演示發(fā)現(xiàn)，當使用新創(chuàng)建的二級標題來替換一級標題之后，則原來的一級標題所包含的標題文本己經不存在。這說明替換節(jié)點的操作不是替換元素名稱，而是替換其包含的所有子節(jié)點以及其包含的所有內容。

    同樣的道理，如果替換節(jié)點還包含子節(jié)點，則子節(jié)點將一同被插入到被替換的節(jié)點中?？梢越柚?replaceChild()方法在文檔中使用現(xiàn)有的節(jié)點替換另一個存在的節(jié)點。

【示例2】在下面的示例中使用藍盒子替換掉紅盒子中包含的一級標題元素。此時可以看到，藍盒子原來顯示的位置己經被刪除，同時被替換的元素hi也被刪除。

var ok = document. getElementByld("ok");                       //獲取按鈕兀素的引用

ok.onclick = function(){                                                       //為按鈕注冊一個鼠標單擊事件處理函數(shù)

    var red = document.getElementByld ("red")               //獲取紅盒子的引用

    var blue = document.getElementByld ("blue");                //獲取藍盒子的引用

    var hi = document.getElementsByTagName ("hi"）[0];   //獲取一級標題的引用

    red.replaceChild (blue,hi);                                               //把紅盒子中包含的一級標題替換為藍盒子

}

【示例3】replaceChildO方法能夠返回被替換掉的節(jié)點引用，因此還可以把被替換掉的元素給找回來，并增加到文檔中的指定節(jié)點中。針對上面的示例，使用一個變量del_hl存儲被替換掉的一級標題，然后再把它插入到紅盒子前面。

var ok = document.getElementByld ("ok");                     //獲取按鈕元素的引用

ok.onclick = function (){                                                     //為按鈕注冊一個鼠標單擊事件處理函數(shù)

    var red = document.getElementByld("red");             //獲取紅盒子的引用

    var blue = document.getElementByld("blue");              //獲取藍盒子的引用

    var hi = document.getElementsByTagName("hi")[0];    //獲取一級標題的引用

    var del_hl = red. replaceChild (blue, hi);                    //把紅盒子中包含的一級標題替換為藍盒子

    red.parentNode. insertBefore (del_hl, red);            //把替換掉的一級標題插入到紅盒子前面