adoptnode 是 javascript 中将节点从原文档“转移”到目标文档的方法，需由目标文档调用，仅支持已存在且归属其他文档的节点，转移后需手动挂载，不适用于跨域 iframe、shadow dom 或 documenttype 节点。
adoptNode 是 JavaScript 中用于将一个节点从它当前所属的文档“转移”到另一个文档的方法。它常用于跨文档操作，比如把 iframe 里的元素移入主页面、或在不同 document 实例（如 XML 文档、模板文档）之间移动节点。
adoptNode 的基本用法和前提条件
该方法必须由目标文档（即你想把节点挂载进去的那个文档）调用，语法为：targetDocument.adoptNode(node)
关键点：
- node 必须是已存在的节点（不能是字符串或 HTML 片段）
- node 当前必须属于另一个文档（否则 adoptNode 无实际效果，但不会报错）
- 调用后，node 会脱离原文档的 DOM 树，归属变为 targetDocument
- adoptNode 不会自动挂载节点——它只做“所有权转移”，后续仍需用
appendChild、insertBefore等手动挂载
典型场景：从 iframe 文档中迁移节点
假设有一个 iframe 已加载完成，想把它的某个 <div> 拿到主页面中使用：
<pre class="brush:php;toolbar:false;">const iframe = document.querySelector('iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
// 获取 iframe 内部的一个节点
const nodeFromIframe = iframeDoc.getElementById('my-content');
// 在主文档中 adopt 它
const adoptedNode = document.adoptNode(nodeFromIframe);
// 然后挂载到主文档某处
document.body.appendChild(adoptedNode);
</pre>
<p>注意：如果 iframe 跨域，<code>contentDocument 无法访问，此操作会失败（受同源策略限制）。
与 importNode 的区别
容易混淆的是 importNode ——它创建的是原节点的**副本**，不切断原节点与源文档的关系；而 adoptNode 是**移动**，原节点从源文档中被移除。
例如：
-
docA.adoptNode(nodeB)→ nodeB 从 docB 中消失，归属变为 docA -
docA.importNode(nodeB, true)→ docA 得到 nodeB 的深拷贝，nodeB 在 docB 中依然存在
注意事项和常见问题
使用 adoptNode 时需留意：
- 脚本、事件监听器、表单数据等通常会被保留（但部分浏览器对
<script></script>标签行为有差异） - CSS 样式可能失效：若样式依赖于原文档中的
<style></style>或外部 CSS，移到新文档后可能不生效，需手动补全 - Shadow DOM 中的节点不能被 adoptNode（会抛出
NotSupportedError） - DocumentType 节点（如
）不可 adopt
