HTML DOM importNode() 方法

什么是 importNode() 方法

importNode() 方法是 DOM 中的一个方法，它用于复制一个节点，并将其插入到当前文档中。通常情况下，当我们需要在不同文档之间共享节点时，可以使用该方法。

importNode() 方法语法

importNode() 方法的语法如下：

document.importNode(node, deep)

• node：要复制的节点
• deep：一个布尔值，表示是否深度复制节点的子节点。如果为 true，则会复制节点的所有子节点；如果为 false，则只会复制节点本身。

importNode() 方法示例

假设我们有两个 HTML 文档，分别为 source.html 和 destination.html。现在我们想要将 source.html 中的某个节点复制到 destination.html 中。

source.html

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Source Document</title>
</head>
<body>
    <div id="source">
        <p>This is the content from source document.</p>
    </div>
</body>
</html>

destination.html

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Destination Document</title>
</head>
<body>
    <div id="destination">
        <p>This is the content from destination document.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

script.js

// www.javascriptcn.com code example
// 获取 source.html 中的节点
const sourceDocument = document.implementation.createHTMLDocument('source');
const sourceElement = sourceDocument.getElementById('source');

// 获取 destination.html 中的节点
const destinationElement = document.getElementById('destination');

// 复制节点
const clonedNode = document.importNode(sourceElement, true);

// 将复制的节点插入到 destination.html 中
destinationElement.appendChild(clonedNode);

在上面的示例中，我们首先创建了一个 sourceDocument，然后从中获取了要复制的节点 sourceElement。接着我们获取了 destinationElement，并使用 importNode() 方法将 sourceElement 复制到 destinationElement 中。

总结

importNode() 方法是一个非常有用的方法，可以帮助我们在不同文档之间复制节点。通过合理的使用，我们可以更加灵活地操作 DOM 元素，提升开发效率。希望本文能帮助你更好地理解和应用这个方法。