adoptnode 用于跨文档移动节点，必须由目标文档调用以彻底剥离原归属；importnode 仅复制不剥离，事件监听器被清除，表单值保留但 shadow dom 丢失，ie 对 svg 有兼容问题。
adoptNode 为什么不能直接用 document.importNode？
因为 importNode 只是复制节点，不切断原归属；而 adoptNode 是真正“收养”——把节点从原文档彻底剥离，再挂到新文档下。如果你要移动 DOM 节点（比如从 iframe 里拖一个元素到主页面），必须用 adoptNode，否则会报错 DOMException: The node provided is owned by a different document。
常见错误场景：从 iframe 的 contentDocument 取出一个 <div>，直接 <code>appendChild 到主文档 body —— 浏览器拒绝，因为该节点仍属于 iframe 文档。
跨 iframe 调用 adoptNode 的正确姿势
关键点：必须用目标文档（即你要把节点塞进去的那个文档）来调用 adoptNode，而不是源文档。
- ❌ 错误：用 iframe 的
contentDocument.adoptNode(node)，再往主文档 append —— 这没用，节点还是属于 iframe - ✅ 正确：用主文档的
document.adoptNode(node)，再appendChild - 注意：
node必须是 iframe 文档中真实存在的节点（如iframe.contentDocument.querySelector('div')），不能是字符串或 HTML 字符串 - 如果 iframe 尚未加载完成，
contentDocument为null，需监听load事件
adoptNode 对节点状态的影响
adoptNode 不只是换爹，还会重置部分内部状态：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有事件监听器（
addEventListener绑定的）会被清除 —— 节点被“重置”后，不再保留原文档中的行为 - 计算样式、布局信息丢失，需要重新触发渲染（通常 append 后自动发生）
- 表单控件（如
<input>）的value值保留，但checked、selected等布尔属性也保留；不过如果原文档已卸载，某些浏览器可能清空这些状态 - Shadow DOM 不会被迁移 —— 如果节点有 shadow root，
adoptNode后它会消失（规范要求）
兼容性与替代方案
adoptNode 在所有现代浏览器中都支持（包括 IE9+），但要注意两个细节：
- IE11 及更早版本对
adoptNode处理 SVG 元素有 bug，建议先 clone 再 adopt，或改用importNode(true)+ 手动清理旧引用 - 如果只是想“取内容”，不用迁移节点本身，优先考虑
innerHTML或outerHTML字符串解析（document.createElement+insertAdjacentHTML），避免跨文档问题 - 动态创建 iframe 场景下，若需频繁收养，可提前在 iframe 加载完成后，把关键节点缓存为 JSON 数据，而非直接操作 DOM
真正容易被忽略的是：adoptNode 不会帮你处理文档级依赖，比如节点内联的 <style></style>、外部样式表链接、自定义元素定义 —— 这些得你手动补全或确保目标文档已就绪。
