复制文档 DOM 而不引用

在编程中，经常需要将 DOM 从一个文档复制到另一个文档。通常情况下，我们会使用 .cloneNode() 方法来复制 DOM，但是它只是创建了一个新的 DOM 节点，且该节点和原始文档中的节点共享同一个引用，因此对该节点的更改将影响原始文档。

为了避免这种问题，我们可以使用 .importNode() 方法来复制 DOM，该方法会创建一个新的 DOM 节点，并将其插入到另一个文档中，从而确保它不会共享同一个引用。

使用 importNode() 方法复制 DOM

以下是使用 .importNode() 方法复制 DOM 的示例代码：

const sourceDoc = document.getElementById("source");
const targetDoc = document.getElementById("target");

const sourceNode = sourceDoc.querySelector("div");
const clonedNode = targetDoc.importNode(sourceNode, true);

targetDoc.appendChild(clonedNode);

这段代码会从 sourceDoc 中获取一个 div 节点，并将其复制到 targetDoc 中。其中，第二个参数 true 表示复制节点的所有属性和子节点。

结论

通过使用 .importNode() 方法来复制 DOM，我们可以防止节点共享同一引用，从而避免对其进行更改时出现不必要的错误。在将 DOM 从一个文档复制到另一个文档时，建议使用该方法来确保数据的完整性和一致性。