【EASYDOM系列教程】之復制節(jié)點

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

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

Node 對象提供了 cloneNode() 方法實現 HTML 頁面中節(jié)點的復制功能。其語法結構如下:

var dupNode = node.cloneNode(deep);

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

參數 deep 則表示是否采用深度克隆。如果為 true，則該節(jié)點的所有后代節(jié)點也都會被克?。蝗绻麨?false，則只克隆該節(jié)點本身。

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

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

var parent = document.getElementById("parent");
var btn = document.getElementById("btn");
// 復制目標節(jié)點
var clone = btn.cloneNode(true);
parent.appendChild(clone);

復制節(jié)點的注意事項

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

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

如果deep參數設為false，則不克隆它的任何子節(jié)點。該節(jié)點所包含的所有文本也不會被克隆，因為文本本身也是一個或多個的 Text 節(jié)點。

為了防止一個文檔中出現兩個 ID 重復的元素,使用 cloneNode() 方法克隆的節(jié)點在需要時應該指定另外一個與原 ID 值不同的 ID。

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

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

GPU云服務器云服務器系列之系列之二架構之坑系列 linux系列教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/87159.html

【EASYDOM系列教程】索引

摘要：系列教程是一套免費開源，任何人都可以免費學習分享，甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始，我們先來了解是什么的作用，以及瀏覽器的支持是怎么樣的。《EASYDOM》系列教程是一套免費、開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業(yè)。本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹在最開始，我...

yanwei 2019-08-21 11:51 評論0 收藏0
【EASYDOM系列教程】之刪除節(jié)點

摘要：對象提供了方法實現從頁面中刪除指定節(jié)點。其語法結構如下在上述語法結構中，調用方法的表示參數的父節(jié)點，而參數則表示要刪除的那個節(jié)點。則用于存儲要刪除的節(jié)點的引用，即。 Node 對象提供了 removeChild() 方法實現從 HTML 頁面中刪除指定節(jié)點。其語法結構如下: var oldChild = node.removeChild(child); OR element.remov...

zzbo 2019-08-20 18:23 評論0 收藏0
【EASYDOM系列教程】之替換節(jié)點

摘要：參數則表示頁面中被替換的節(jié)點。方法的返回值也是被替換的節(jié)點，即。如果該節(jié)點已經存在于節(jié)點樹結構中的話，則它會被從原始位置刪除。但需要注明作者及來源，并且不能用于商業(yè)。本教程采用知識共享署名非商業(yè)性使用禁止演繹國際許可協議進行許可。 Node 對象提供了 replaceChild() 方法實現 HTML 頁面中節(jié)點的替換功能。其語法結構如下: replacedNode = parentN...

陳江龍 2019-08-20 18:34 評論0 收藏0
【EASYDOM系列教程】之 DOM 元素樹

摘要：元素之間的關系在元素樹結構中，主要具有以下三層關系。祖先與后代如果我們將頁面中某一個元素作為祖先的話，那包含在該元素內的所有元素除子級之外的都可以稱為該元素的后代。兄弟關系具有相同父級元素的兩個或幾個元素之間就是兄弟關系。 DOM 元素樹結構與 DOM 節(jié)點樹結構很相似，區(qū)別僅在于是利用節(jié)點解析 HTML 元素，還是利用元素解析 HTML 元素。 DOM 樹結構還記得下面這張圖嗎? ...

stormzhang 2019-08-21 12:00 評論0 收藏0
【EASYDOM系列教程】之判斷節(jié)點類型

摘要：對象中提供了和分別可以用于獲取指定節(jié)點的節(jié)點名稱節(jié)點類型和節(jié)點的值。具體的語法結構如下在上述語法結構中，是一個整數，其代表的是節(jié)點類型。本教程采用知識共享署名非商業(yè)性使用禁止演繹國際許可協議進行許可。 Node 對象中提供了 nodeName、nodeType 和 nodeValue 分別可以用于獲取指定節(jié)點的節(jié)點名稱、節(jié)點類型和節(jié)點的值。 DOM 節(jié)點樹結構中，我們實際開發(fā)最常見的節(jié)...

CocoaChina 2019-08-20 18:17 評論0 收藏0