【EASYDOM系列教程】之复制节点

Panda 发布于2019-08-21 11:50 / 1122人阅读

摘要：也就是说，它没有父节点。如果参数设为，则不克隆它的任何子节点。为了防止一个文档中出现两个重复的元素使用方法克隆的节点在需要时应该指定另外一个与原值不同的。

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 国际许可协议进行许可。

GPU云服务器云服务器系列之系列之二架构之坑系列 linux系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87159.html

【EASYDOM系列教程】索引

摘要：系列教程是一套免费开源，任何人都可以免费学习分享，甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始，我们先来了解是什么的作用，以及浏览器的支持是怎么样的。《EASYDOM》系列教程是一套免费、开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。本文是这套系列教程的索引（也就是目录）: 第一回 DOM 介绍在最开始，我...

yanwei 2019-08-21 11:51 评论0 收藏0
【EASYDOM系列教程】之删除节点

摘要：对象提供了方法实现从页面中删除指定节点。其语法结构如下在上述语法结构中，调用方法的表示参数的父节点，而参数则表示要删除的那个节点。则用于存储要删除的节点的引用，即。 Node 对象提供了 removeChild() 方法实现从 HTML 页面中删除指定节点。其语法结构如下: var oldChild = node.removeChild(child); OR element.remov...

zzbo 2019-08-20 18:23 评论0 收藏0
【EASYDOM系列教程】之替换节点

摘要：参数则表示页面中被替换的节点。方法的返回值也是被替换的节点，即。如果该节点已经存在于节点树结构中的话，则它会被从原始位置删除。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Node 对象提供了 replaceChild() 方法实现 HTML 页面中节点的替换功能。其语法结构如下: replacedNode = parentN...

陈江龙 2019-08-20 18:34 评论0 收藏0
【EASYDOM系列教程】之 DOM 元素树

摘要：元素之间的关系在元素树结构中，主要具有以下三层关系。祖先与后代如果我们将页面中某一个元素作为祖先的话，那包含在该元素内的所有元素除子级之外的都可以称为该元素的后代。兄弟关系具有相同父级元素的两个或几个元素之间就是兄弟关系。 DOM 元素树结构与 DOM 节点树结构很相似，区别仅在于是利用节点解析 HTML 元素，还是利用元素解析 HTML 元素。 DOM 树结构还记得下面这张图吗? ...

stormzhang 2019-08-21 12:00 评论0 收藏0
【EASYDOM系列教程】之判断节点类型

摘要：对象中提供了和分别可以用于获取指定节点的节点名称节点类型和节点的值。具体的语法结构如下在上述语法结构中，是一个整数，其代表的是节点类型。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Node 对象中提供了 nodeName、nodeType 和 nodeValue 分别可以用于获取指定节点的节点名称、节点类型和节点的值。 DOM 节点树结构中，我们实际开发最常见的节...

CocoaChina 2019-08-20 18:17 评论0 收藏0