直接appendchild报错是因为节点归属文档不匹配，浏览器禁止跨文档直接插入；必须用目标文档的adoptnode先转移归属，再appendchild。
为什么直接 appendChild 会报错 DOMException: The node provided is owned by a different document
因为 iframe 中取出的节点（比如 iframe.contentDocument.querySelector('div')）仍绑定在 iframe 的 document 上，而主文档的 appendChild 只接受属于自己 ownerDocument 的节点。浏览器强制隔离，不让你“硬塞”。这不是权限问题，是 DOM 规范的底层约束——节点不能同时属于两个文档。
常见错误写法：
-
document.body.appendChild(iframe.contentDocument.body.firstChild)→ 直接抛错 -
iframe.contentDocument.adoptNode(node)→ 调用方错了，必须由目标文档（主文档）调用 - 在 iframe 尚未加载完成时访问
contentDocument→ 返回null，后续调用adoptNode会报TypeError
正确调用 document.adoptNode 的三步闭环
关键不是“取出来”，而是“换归属再插入”。整个流程必须由主文档的 document 主导：
- 确保 iframe 已加载：
iframe.addEventListener('load', handler)，或检查iframe.contentDocument?.readyState === 'complete' - 从 iframe 文档中获取真实节点：
const node = iframe.contentDocument.querySelector('.editable')（不能是字符串、HTML 字符串或已移除的节点） - 用主文档调用
adoptNode：const adopted = document.adoptNode(node)—— 此刻node已从 iframe 文档中删除，adopted.ownerDocument指向document - 插入到编辑器容器：
editorContainer.appendChild(adopted)
注意：adoptNode 不接受第二个参数，它总是深度迁移整个子树；返回节点的 parentNode 为 null，处于游离状态，必须显式插入才可见。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
adoptNode 后表单控件和事件监听器会发生什么
这是编辑器场景中最容易翻车的地方：你拖进来的 <input> 看起来还在，但行为可能已失效。
-
<input value="hello">的value属性值保留，checked、selected等布尔状态也保留，但若 iframe 页面已被销毁，部分浏览器（如旧版 Safari）可能清空这些值 - 所有通过
addEventListener绑定的事件监听器被彻底清除 ——adoptNode不迁移行为，只迁移结构与属性 - 内联事件处理器（如
onclick="alert(1)"）也不会执行，因为它们依赖原文档执行上下文 - 如果节点含 Shadow DOM，它会被剥离并丢失（DOM 规范明确要求）
所以，如果你依赖节点上的交互逻辑，得在 adoptNode 后手动重绑事件，或改用 importNode + 状态快照（如读取 input.value 后重建）。
什么时候该选 importNode 而不是 adoptNode
当你要保留 iframe 中原始节点、只想要一个副本时，importNode 更安全。但它不解决“状态迁移”问题：
-
document.importNode(node, true)返回的是克隆体，原文档节点完好无损 - 克隆体丢失事件监听器、Shadow DOM、自定义元素实例，且
node.dataset和node.classList虽保留，但node.isConnected为false，需插入后才激活 - 对
<template></template>的content（即DocumentFragment），importNode是唯一合规方式，因为adoptNode不支持DocumentFragment - 如果 iframe 是跨域的，连
contentDocument都不可读，此时adoptNode和importNode都无法使用，只能靠 postMessage 传结构数据再本地重建
真正容易被忽略的是：adoptNode 不处理样式作用域——节点带的 <style></style> 标签不会自动生效，外部 CSS 类名若在主文档无对应规则，就只是个空壳。你得同步迁移或预置样式上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
