Node 對象提供了 cloneNode() 方法實現(xiàn) HTML 頁面中節(jié)點的復制功能。其語法結構如下:
```javascript
var dupNode = node.cloneNode(deep);
```
在上述語法結構中,調用 cloneNode() 方法的 node 表示被克隆的節(jié)點,返回值 dupNode 表示克隆后的新節(jié)點。
參數(shù) deep 則表示是否采用深度克隆。如果為 true,則該節(jié)點的所有后代節(jié)點也都會被克?。蝗绻麨?false,則只克隆該節(jié)點本身。
> **值得注意的是:** 參數(shù) deep 如果默認不傳遞的話,值為 false。但在舊版本的瀏覽器中, 你始終需要指定 deep 參數(shù)。
我們可以通過如下代碼示例,測試 replaceChild() 方法的具體使用:
```javascript
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參數(shù)設為false,則不克隆它的任何子節(jié)點。該節(jié)點所包含的所有文本也不會被克隆,因為文本本身也是一個或多個的 Text 節(jié)點。
為了防止一個文檔中出現(xiàn)兩個 ID 重復的元素,使用 cloneNode() 方法克隆的節(jié)點在需要時應該指定另外一個與原 ID 值不同的 ID。
- 關于
- 第一章 DOM 是什么
- 第一節(jié) DOM 介紹
- 第二節(jié) DOM 樹結構
- 第二章 Document 對象
- 第一節(jié) Document 對象介紹
- 第二節(jié) 定位頁面元素
- 第三節(jié) 創(chuàng)建頁面元素
- 第三章 Node 對象
- 第一節(jié) Node 對象介紹
- 第二節(jié) 判斷節(jié)點類型
- 第三節(jié) 遍歷節(jié)點
- 第四節(jié) 插入節(jié)點
- 第五節(jié) 刪除節(jié)點
- 第六節(jié) 替換節(jié)點
- 第七節(jié) 復制節(jié)點
- 第八節(jié) textContent 屬性
- 第四章 Element 對象
- 第一節(jié) Element 對象介紹
- 第二節(jié) DOM 元素樹
- 第三節(jié) 定位頁面元素
- 第四節(jié) 遍歷元素
- 第五節(jié) 屬性操作
- 第六節(jié) innerHTML 屬性
- 第五章 樣式操作
- 第一節(jié) 獲取內聯(lián)樣式
- 第二節(jié) 獲取外聯(lián)樣式表
- 第三節(jié) 獲取 class 屬性
- 第四節(jié) 獲取當前有效樣式
- 第五節(jié) 設置內聯(lián)樣式
- 第六節(jié) 設置 class 屬性
- 第七節(jié) Element 對象的樣式屬性
- 第六章 事件
- 第一節(jié) 什么是事件
- 第二節(jié) 注冊事件
- 第三節(jié) 移除注冊事件
- 第四節(jié) Event 事件對象
- 第五節(jié) 獲取目標元素
- 第六節(jié) 阻止默認行為
- 第七節(jié) 獲取鼠標坐標
- 第八節(jié) 事件流
- 第九節(jié) 事件委托
- 第七章 表單操作
- 第一節(jié) 獲取表單
- 第二節(jié) 表單操作
- 第三節(jié) 表單驗證
- 第四節(jié) 表單提交
- 第八章 BOM
- 第一節(jié) BOM 是什么
- 第二節(jié) Window 對象
- 第三節(jié) Navigator 對象
- 第四節(jié) History 對象
- 第五節(jié) Location 對象
- 第六節(jié) 定時器
