JavaScript document.importNode
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.importNode 方法。此方法对于处理来自外部文档的节点至关重要，它允许开发人员在不同文档之间克隆节点。
基本定义
document.importNode 方法会创建一个来自另一个文档的节点的副本，该副本可以插入到当前文档中。这在处理 iframe 或 XML 文档时特别有用。
该方法接受两个参数：要导入的节点和一个布尔值，指示是执行深度克隆（包括所有子节点）还是浅克隆。
基本 importNode 示例
此示例演示了如何使用 iframe 将一个简单的段落节点从一个文档导入到另一个文档。
<!DOCTYPE html>
<html>
<head>
<title>Basic importNode</title>
</head>
<body>
<iframe id="externalFrame" src="external.html" style="display:none"></iframe>
<div id="target"></div>
<script>
window.onload = function() {
const iframe = document.getElementById('externalFrame');
const externalDoc = iframe.contentDocument || iframe.contentWindow.document;
const externalNode = externalDoc.getElementById('sourcePara');
const importedNode = document.importNode(externalNode, true);
document.getElementById('target').appendChild(importedNode);
};
</script>
</body>
</html>
在此示例中，我们有一个隐藏的 iframe 加载了一个外部文档。页面加载时，我们访问 iframe 的文档，找到一个段落节点，使用 importNode 导入它，并将其追加到我们的主文档中。
这演示了 importNode 在文档之间传输节点的基本用法。第二个参数（true）确保了节点及其所有子节点的深度克隆。
使用浅克隆导入
此示例显示了在使用 importNode 时深度克隆和浅克隆之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>Shallow Clone</title>
</head>
<body>
<iframe id="externalFrame" src="external.html" style="display:none"></iframe>
<div id="shallowTarget"></div>
<div id="deepTarget"></div>
<script>
window.onload = function() {
const iframe = document.getElementById('externalFrame');
const externalDoc = iframe.contentDocument || iframe.contentWindow.document;
const externalDiv = externalDoc.getElementById('sourceDiv');
// Shallow clone (false)
const shallowClone = document.importNode(externalDiv, false);
document.getElementById('shallowTarget').appendChild(shallowClone);
// Deep clone (true)
const deepClone = document.importNode(externalDiv, true);
document.getElementById('deepTarget').appendChild(deepClone);
};
</script>
</body>
</html>
在这里，我们演示了浅克隆和深克隆。浅克隆（false）仅复制 div 元素本身而不复制其子元素，而深克隆（true）则复制 div 及其所有嵌套元素。
此示例强调了 importNode 中第二个参数的重要性。选择浅克隆还是深克隆取决于您对节点传输的具体要求。
导入 XML 文档节点
此示例演示了如何将 XML 文档中的节点导入到 HTML 文档中。
<!DOCTYPE html>
<html>
<head>
<title>XML Import</title>
</head>
<body>
<div id="xmlContent"></div>
<script>
const parser = new DOMParser();
const xmlString = `<book><title>JavaScript Guide</title><author>John Doe</author></book>`;
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const bookNode = xmlDoc.getElementsByTagName('book')[0];
const importedNode = document.importNode(bookNode, true);
document.getElementById('xmlContent').appendChild(importedNode);
</script>
</body>
</html>
在此示例中，我们使用 DOMParser 创建了一个 XML 文档，然后将其中的一个节点导入到我们的 HTML 文档中。XML 结构在导入过程中得以保留。
这表明 importNode 如何用于在不同文档类型之间传输内容。该方法与 XML 文档的配合程度与与 HTML 文档的配合程度一样无缝。
导入样式元素
此示例演示了将样式元素从一个文档导入到另一个文档。
<!DOCTYPE html>
<html>
<head>
<title>Style Import</title>
</head>
<body>
<iframe id="styleFrame" src="style-doc.html" style="display:none"></iframe>
<p id="styledText">This text will be styled after import.</p>
<script>
window.onload = function() {
const iframe = document.getElementById('styleFrame');
const externalDoc = iframe.contentDocument || iframe.contentWindow.document;
const styleNode = externalDoc.getElementsByTagName('style')[0];
const importedStyle = document.importNode(styleNode, true);
document.head.appendChild(importedStyle);
};
</script>
</body>
</html>
在这里，我们从外部文档导入了一个样式元素，并将其追加到我们主文档的 head 中。这使我们能够动态应用来自外部源的样式。
此示例展示了 importNode 如何与样式元素一起使用。导入的样式在追加到 head 后会立即影响主文档中的元素。
导入复杂结构
此示例演示了导入包含事件监听器的复杂 DOM 结构。
<!DOCTYPE html>
<html>
<head>
<title>Complex Structure</title>
</head>
<body>
<iframe id="complexFrame" src="complex-doc.html" style="display:none"></iframe>
<div id="complexTarget"></div>
<script>
window.onload = function() {
const iframe = document.getElementById('complexFrame');
const externalDoc = iframe.contentDocument || iframe.contentWindow.document;
const complexNode = externalDoc.getElementById('complexStructure');
const importedNode = document.importNode(complexNode, true);
document.getElementById('complexTarget').appendChild(importedNode);
// Note: Event listeners from the original node are not copied
document.getElementById('importedButton').addEventListener('click', function() {
alert('Button from imported structure clicked!');
});
};
</script>
</body>
</html>
在此示例中，我们导入了一个包含交互式元素的复杂 DOM 结构。请注意，原始节点中的事件监听器在导入过程中不会保留。
这表明，虽然 importNode 复制了 DOM 结构，但它不会维护事件监听器等与 JavaScript 相关的属性。如果需要，这些属性需要在导入后重新附加。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.importNode。此方法对于在 Web 开发中处理来自外部文档的节点至关重要。
作者
列出 所有 JS DOM 教程。