JavaScript 復(fù)制節(jié)點(diǎn)

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

cloneNode()方法可以創(chuàng)建一個(gè)節(jié)點(diǎn)的副本。其用法如下:

    node.cloneNode(include all)

該方法將復(fù)制并返回調(diào)用它的節(jié)點(diǎn)的副本。如果參數(shù)為tme，將復(fù)制當(dāng)前節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)；否則，只復(fù)制當(dāng)前節(jié)點(diǎn)。

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

【示例1】在下面的示例中，首先創(chuàng)建一個(gè)節(jié)點(diǎn)p，然后復(fù)制該節(jié)點(diǎn)為pl，再利用nodeName和 nodeType屬性獲取復(fù)制節(jié)點(diǎn)的基本信息，該節(jié)點(diǎn)的信息與原來(lái)創(chuàng)建的節(jié)點(diǎn)基本信息相同。

var p = document.createElement ("p");            //創(chuàng)建節(jié)點(diǎn)

var pi = p.cloneNode(false);                              //復(fù)制節(jié)點(diǎn)

var info = "nodeName: " + p1.nodeName;      //獲取復(fù)制節(jié)點(diǎn)的名稱

info += ", nodeType: " + pl.nodeType;            //獲取復(fù)制節(jié)點(diǎn)的類(lèi)型

console.log(info);                                             //顯示復(fù)制節(jié)點(diǎn)的名稱和類(lèi)型相同

【示例2】以示例1為基礎(chǔ)，再創(chuàng)建一個(gè)文本節(jié)點(diǎn)之后，然后嘗試把復(fù)制的文本節(jié)點(diǎn)增加到段落元素中，再把段落元素增加到標(biāo)題元素中，最后把標(biāo)題元素增加到body元素中。如果此時(shí)調(diào)用復(fù)制文本節(jié)點(diǎn)的nodeName和nodeType屬性，則返回的nodeType屬性值為3，而nodeName屬性值為#text。

var p = document.createElement("p");                //創(chuàng)建一個(gè)p元素

var hi = document.createElement("hi");              //創(chuàng)建一個(gè)h1元素

var txt = document.createTextNode("Hello World");   //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

var hello = txt.cloneNode(false);                         //復(fù)制創(chuàng)建的文本節(jié)點(diǎn)

p.appendChild(txt);                                             //把復(fù)制的文本節(jié)點(diǎn)增加到段落節(jié)點(diǎn)中

hi.appendChild(p);                                              //把段落節(jié)點(diǎn)増加到標(biāo)題節(jié)點(diǎn)中

document.body.appendChild(hi);                      //把標(biāo)題節(jié)點(diǎn)增加到body節(jié)點(diǎn)中

【示例3】下面的示例演示了如何復(fù)制一個(gè)節(jié)點(diǎn)及所有包含的子節(jié)點(diǎn)。當(dāng)復(fù)制其中創(chuàng)建的標(biāo)題1節(jié)點(diǎn)之后，該節(jié)點(diǎn)所包含的子節(jié)點(diǎn)及文本節(jié)點(diǎn)都將復(fù)制過(guò)來(lái)，然后增加到body元素的尾部。

var p = document.createElement("p");                //創(chuàng)建一個(gè)p元素

var h1 = document.createElement("hi");             //創(chuàng)建一個(gè)h1元素

var txt = document.createTextNode("Hello World");  //創(chuàng)建一個(gè)文本節(jié)點(diǎn)，文本內(nèi)容為//“Hello World”

p.appendChild(txt);                                               //把文本節(jié)點(diǎn)增加到段落中

hi.appendChild(p);                                                 //把段落元素增加到標(biāo)題元素中

document.body.appendChild(hi);                          //把標(biāo)題元素增加到body元素中

var new_hl = hi.cloneNode(true);                          //復(fù)制標(biāo)題元素及其所有子節(jié)點(diǎn)

document.body.appendChild (new__hl);               //把復(fù)制的新標(biāo)題元素增加到文檔中