Node 对象提供了 cloneNode() 方法实现 HTML 页面中节点的复制功能。其语法结构如下:
```javascript
var dupNode = node.cloneNode(deep);
```
在上述语法结构中,调用 cloneNode() 方法的 node 表示被克隆的节点,返回值 dupNode 表示克隆后的新节点。
参数 deep 则表示是否采用深度克隆。如果为 true,则该节点的所有后代节点也都会被克隆;如果为 false,则只克隆该节点本身。
> **值得注意的是:** 参数 deep 如果默认不传递的话,值为 false。但在旧版本的浏览器中, 你始终需要指定 deep 参数。
我们可以通过如下代码示例,测试 replaceChild() 方法的具体使用:
```javascript
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。
- 关于
- 第一章 DOM 是什么
- 第一节 DOM 介绍
- 第二节 DOM 树结构
- 第二章 Document 对象
- 第一节 Document 对象介绍
- 第二节 定位页面元素
- 第三节 创建页面元素
- 第三章 Node 对象
- 第一节 Node 对象介绍
- 第二节 判断节点类型
- 第三节 遍历节点
- 第四节 插入节点
- 第五节 删除节点
- 第六节 替换节点
- 第七节 复制节点
- 第八节 textContent 属性
- 第四章 Element 对象
- 第一节 Element 对象介绍
- 第二节 DOM 元素树
- 第三节 定位页面元素
- 第四节 遍历元素
- 第五节 属性操作
- 第六节 innerHTML 属性
- 第五章 样式操作
- 第一节 获取内联样式
- 第二节 获取外联样式表
- 第三节 获取 class 属性
- 第四节 获取当前有效样式
- 第五节 设置内联样式
- 第六节 设置 class 属性
- 第七节 Element 对象的样式属性
- 第六章 事件
- 第一节 什么是事件
- 第二节 注册事件
- 第三节 移除注册事件
- 第四节 Event 事件对象
- 第五节 获取目标元素
- 第六节 阻止默认行为
- 第七节 获取鼠标坐标
- 第八节 事件流
- 第九节 事件委托
- 第七章 表单操作
- 第一节 获取表单
- 第二节 表单操作
- 第三节 表单验证
- 第四节 表单提交
- 第八章 BOM
- 第一节 BOM 是什么
- 第二节 Window 对象
- 第三节 Navigator 对象
- 第四节 History 对象
- 第五节 Location 对象
- 第六节 定时器