【EASYDOM系列教程】之復(fù)制節(jié)點(diǎn)

Panda 發(fā)布于2019-08-21 11:50 / 1124人閱讀

摘要：也就是說，它沒有父節(jié)點(diǎn)。如果參數(shù)設(shè)為，則不克隆它的任何子節(jié)點(diǎn)。為了防止一個(gè)文檔中出現(xiàn)兩個(gè)重復(fù)的元素使用方法克隆的節(jié)點(diǎn)在需要時(shí)應(yīng)該指定另外一個(gè)與原值不同的。

Node 對(duì)象提供了 cloneNode() 方法實(shí)現(xiàn) HTML 頁(yè)面中節(jié)點(diǎn)的復(fù)制功能。其語法結(jié)構(gòu)如下:

var dupNode = node.cloneNode(deep);

在上述語法結(jié)構(gòu)中，調(diào)用 cloneNode() 方法的 node 表示被克隆的節(jié)點(diǎn)，返回值 dupNode 表示克隆后的新節(jié)點(diǎn)。

參數(shù) deep 則表示是否采用深度克隆。如果為 true，則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆；如果為 false，則只克隆該節(jié)點(diǎn)本身。

值得注意的是: 參數(shù) deep 如果默認(rèn)不傳遞的話，值為 false。但在舊版本的瀏覽器中, 你始終需要指定 deep 參數(shù)。

我們可以通過如下代碼示例，測(cè)試 replaceChild() 方法的具體使用:

var parent = document.getElementById("parent");
var btn = document.getElementById("btn");
// 復(fù)制目標(biāo)節(jié)點(diǎn)
var clone = btn.cloneNode(true);
parent.appendChild(clone);

復(fù)制節(jié)點(diǎn)的注意事項(xiàng)

克隆一個(gè)元素節(jié)點(diǎn)會(huì)拷貝它所有的屬性以及屬性值,當(dāng)然也就包括了屬性上綁定的事件，但不會(huì)拷貝那些使用 addEventListener() 方法或者 node.onclick = fn 這種用 JavaScript 動(dòng)態(tài)綁定的事件。

在使用 Node.appendChild() 或其他類似的方法將拷貝的節(jié)點(diǎn)添加到文檔中之前，那個(gè)拷貝節(jié)點(diǎn)并不屬于當(dāng)前文檔樹的一部分。也就是說，它沒有父節(jié)點(diǎn)。

如果deep參數(shù)設(shè)為false，則不克隆它的任何子節(jié)點(diǎn)。該節(jié)點(diǎn)所包含的所有文本也不會(huì)被克隆，因?yàn)槲谋颈旧硪彩且粋€(gè)或多個(gè)的 Text 節(jié)點(diǎn)。

為了防止一個(gè)文檔中出現(xiàn)兩個(gè) ID 重復(fù)的元素,使用 cloneNode() 方法克隆的節(jié)點(diǎn)在需要時(shí)應(yīng)該指定另外一個(gè)與原 ID 值不同的 ID。

本教程免費(fèi)開源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來源，并且不能用于商業(yè)。

本教程采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。