JavaScript cloneNode() 方法深拷贝与浅拷贝详解

作者:像素猫

时间:2026-10-28

浏览:211

本文介绍 JavaScript 中 cloneNode() 方法的使用。该方法通过布尔参数控制节点复制行为:true 执行深拷贝,包含子节点树;false 执行浅拷贝,仅复制当前节点。复制后的节点需通过 appendChild 等方法插入文档才能显示,否则无父节点。

文章目录

cloneNode() 方法参数说明

cloneNode(a) 方法接收一个布尔值参数,用于决定执行深拷贝还是浅拷贝。


当参数为 true 时,执行深拷贝,不仅复制当前节点,还会复制其整个子节点树。


当参数为 false 时,执行浅拷贝,仅复制节点本身,不包含任何子节点。


复制操作返回的节点副本虽然属于文档对象,但此时它没有父节点。必须使用 appendChild、insertChild 或 replaceChild 等方法将其添加到文档中,否则该节点不会在页面中显示。


代码示例与兼容性说明

具体代码实现如下:

 
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
var oDiv = document.getElementById("guoDiv");
var deepList = oDiv.cloneNode(true); //拷贝子节点
alert(deepList.childNodes.length); //3或7(兼容性问题,所以结果不一样)
var showList = oDiv.cloneNode(false); //只拷贝当前元素的引用
alert(showList.childNodes.length); //0

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章