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

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