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)的類型
console.log(info); //顯示復(fù)制節(jié)點(diǎn)的名稱和類型相同
【示例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)題元素增加到文檔中
點(diǎn)擊加載更多評(píng)論>>