JavaScript 替換節(jié)點(diǎn)

■知識(shí)點(diǎn)

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

    nodeObject.replaceChild(new_node,old_node)

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

■實(shí)例設(shè)計(jì)

【示例1】重寫腳本，新建一個(gè)二級(jí)標(biāo)題元素，并替換掉紅盒子中的一級(jí)標(biāo)題元素。

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

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

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

    var h1 = document.getElementsByTagName ("h1"）[0];  //獲取一級(jí)標(biāo)題的引用 

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

    red. replaceChild (h2, h1);                                                //把一級(jí)標(biāo)題替換為二級(jí)標(biāo)題

}

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

    同樣的道理，如果替換節(jié)點(diǎn)還包含子節(jié)點(diǎn)，則子節(jié)點(diǎn)將一同被插入到被替換的節(jié)點(diǎn)中。可以借助 replaceChild()方法在文檔中使用現(xiàn)有的節(jié)點(diǎn)替換另一個(gè)存在的節(jié)點(diǎn)。

【示例2】在下面的示例中使用藍(lán)盒子替換掉紅盒子中包含的一級(jí)標(biāo)題元素。此時(shí)可以看到，藍(lán)盒子原來顯示的位置己經(jīng)被刪除，同時(shí)被替換的元素hi也被刪除。

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

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

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

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

    var hi = document.getElementsByTagName ("hi"）[0];   //獲取一級(jí)標(biāo)題的引用

    red.replaceChild (blue,hi);                                               //把紅盒子中包含的一級(jí)標(biāo)題替換為藍(lán)盒子

}

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

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

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

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

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

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

    var del_hl = red. replaceChild (blue, hi);                    //把紅盒子中包含的一級(jí)標(biāo)題替換為藍(lán)盒子

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