【EASYDOM系列教程】之複製節點

Node 對象提供了 cloneNode() 方法實現 HTML 頁面中節點的複製功能。其語法結構以下:

var dupNode = node.cloneNode(deep);

在上述語法結構中，調用 cloneNode() 方法的 node 表示被克隆的節點，返回值 dupNode 表示克隆後的新節點。

參數 deep 則表示是否採用深度克隆。若是爲 true，則該節點的全部後代節點也都會被克隆；若是爲 false，則只克隆該節點自己。

值得注意的是: 參數 deep 若是默認不傳遞的話，值爲 false。但在舊版本的瀏覽器中, 你始終須要指定 deep 參數。

咱們能夠經過以下代碼示例，測試 replaceChild() 方法的具體使用:

var parent = document.getElementById('parent');
var btn = document.getElementById('btn');
// 複製目標節點
var clone = btn.cloneNode(true);
parent.appendChild(clone);

複製節點的注意事項

克隆一個元素節點會拷貝它全部的屬性以及屬性值,固然也就包括了屬性上綁定的事件，但不會拷貝那些使用 addEventListener() 方法或者 node.onclick = fn 這種用 JavaScript 動態綁定的事件。

在使用 Node.appendChild() 或其餘相似的方法將拷貝的節點添加到文檔中以前，那個拷貝節點並不屬於當前文檔樹的一部分。也就是說，它沒有父節點。

若是deep參數設爲false，則不克隆它的任何子節點。該節點所包含的全部文本也不會被克隆，由於文本自己也是一個或多個的 Text 節點。

爲了防止一個文檔中出現兩個 ID 重複的元素,使用 cloneNode() 方法克隆的節點在須要時應該指定另一個與原 ID 值不一樣的 ID。

---

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。