document.importNode和document.adoptNode使用及区别

在学习Web Components即web组件中的Shadow DOM创建组件时，发现document.importNode的使用，顺虅摸瓜又摸到了document.adoptNode，在这里做记录一下document.importNode和document.adoptNode如何使用及它们的区别。

document.importNode

document.importNode是将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。

语法

var node = document.importNode(externalNode, deep);

node：导入当前文档的新节点，新节点的parentNode是null, 因为它还没有插入当前文档的文档树中,属于游离状态。
externalNode：将要从外部文档导入的节点。
deep（可选）：一个布尔值,表明是否要导入节点的后代节点。

注意：在DOM4规范中deep是个可选的参数，如果省略不写,则使用默认值true, 表示深度克隆。如果你想使用浅克隆,则传入false参数。在没有实现DOM4的浏览器中, 这个参数不可以省略。

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);//深拷贝
document.getElementById("container").appendChild(newNode);
console.log(oldNode === newNode);//false
console.log(newNode.ownerDocument);//当前文档
console.log(oldNode.ownerDocument);//iframe Document

浏览器兼容：IE9+;

Document.adoptNode()

从其他的document文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument属性会变成当前的document文档。之后你可以把这个节点插入到当前文档中。

语法

var node = document.adoptNode(externalNode);

node：导入当前文档的新节点. 新节点的parentNode是null, 因为它还没有插入当前文档的文档树中，属于游离状态。
externalNode：将要从外部文档导入的节点。

var iframe = document.getElementsByTagName("iframe")[0];
var firstEle = iframe.contentWindow.document.body.firstElementChild;
var adoptNode = document.adoptNode(firstEle);
firstEle && document.body.appendChild( adoptNode );
console.log(firstEle === adoptNode); // true
console.log(adoptNode.ownerDocument); // 当前文档
console.log(firstEle.ownerDocument); // 当前文档

document.adoptNode不但可以从iframe中获取adopt元素，在同一document文档下的不同两个元素中也可以使用，该方法可以实现从左边栏列表中选取某些元素移除并加载到右边栏的功能。

浏览器兼容：IE9+;

document.importNode和document.adoptNode的区别

document.importNode是一个节点拷贝一份。
document.adoptNode从原文档删除节点(如果有这个节点的话)

document.importNode和document.adoptNode使用及区别