structuredClone 不允许直接拷贝 DOM 节点，因其属不可序列化的宿主对象，含渲染资源、事件监听器等运行时强引用；仅支持提取 value、checked 等纯数据后克隆。
structuredClone 不允许直接拷贝 DOM 节点（如 Element、Document、Text、Node 实例），这不是 bug，而是规范明确设计的限制——DOM 节点属于“宿主对象”（host objects），不具备结构化克隆所需的可序列化语义。
DOM 节点为什么不可克隆
DOM 节点不是纯数据容器，而是绑定浏览器渲染引擎、事件系统和内存管理的运行时实体。它们内部持有：
- 对父节点、子节点、样式计算结果的强引用（可能含循环）
- 与 layout、paint、composite 阶段关联的底层渲染资源
- 事件监听器列表（函数引用，本身不可克隆）
- 内部标识符（如 node id、layout object 指针），无法跨上下文复制
这些特性让 DOM 节点不符合结构化克隆协议中“可转移、可复制、无副作用”的要求，因此调用 structuredClone(document.body) 或 structuredClone(event.target) 会立即抛出 DataCloneError。
哪些 DOM 相关类型明确被禁止
以下类型在任何支持 structuredClone 的环境中均不可克隆：
-
Node及其所有子类：Element、Document、DocumentFragment、Text、Comment - 全局宿主对象：
window、document、location、navigator - 绑定上下文的接口：
CanvasRenderingContext2D、AudioContext、MediaStream
注意：像 Blob、File、ImageData 这类虽与 DOM 交互频繁，但属于可序列化数据载体，是受支持的。
如何安全地“拷贝 DOM 状态”而非节点本身
若目标是保存或传输 DOM 的可读状态（例如表单值、滚动位置、选中文本），应提取结构化数据再克隆：
- 表单控件：读取
input.value、select.selectedOptions、textarea.value、checkbox.checked - 元素属性：用
el.getAttribute('data-id')或el.dataset获取自定义属性 - 样式快照：仅取内联样式
el.style.cssText（不推荐克隆 computedStyle） - 文本内容：用
el.textContent或el.innerText，避免innerHTML（含 HTML 注入风险）
示例：
const formState = {email: document.getElementById('email').value,
theme: document.querySelector('[name="theme"]').value,
agreed: document.getElementById('agree').checked
};
const safeClone = structuredClone(formState); // ✅ 安全
替代方案：需要真正复用 DOM 行为时怎么办
如果业务逻辑依赖 DOM 节点行为（如动态插入、事件触发），structuredClone 不适用，应考虑：
- 用
cloneNode(true)创建同文档内的 DOM 副本（浅/深克隆，保留事件监听器需手动处理） - 将 DOM 构建逻辑封装为函数或模板字符串，在目标上下文重新生成
- 通过
postMessage传递结构化数据 + 指令（如{ type: 'INSERT', html: '），由接收方执行 DOM 操作...' }
不要尝试绕过限制强行克隆节点——错误不会静默发生，而会中断执行流。
