dom节点浅拷贝唯一安全方式是clonenode(false)，它复制节点自身属性和文本内容但不复制子节点、事件监听器，而object.assign或展开运算符对dom节点无效，因其为只读宿主对象。
浅拷贝在处理 DOM 节点时本质上不安全，且多数情况下无效或危险——因为 DOM 节点是特殊对象，不能被常规浅拷贝方法真正复制，只会复制引用，而 DOM 节点本身不允许跨上下文共享或重复插入。
DOM 节点不是普通 JavaScript 对象
DOM 节点（如 div、span）继承自 Node，具有唯一性、宿主绑定性和状态敏感性。它们：
- 在文档中只能有一个父节点，重复
appendChild()会自动从原位置移除 - 携带事件监听器、样式计算、布局信息等不可序列化的运行时状态
- 不支持
Object.assign()、扩展运算符{...node}或Array.from([node])的“属性复制”——这些操作对 DOM 节点返回空对象或报错
常见“伪浅拷贝”操作的实际行为
以下写法看似在拷贝，实则只是复制引用或触发异常：
-
const copy = Object.assign({}, node)→ 返回空对象{}（DOM 节点的自有可枚举属性极少，且关键属性如parentNode不可枚举） -
const copy = {...node}→ 同样得到几乎空的对象，丢失所有方法（addEventListener等）和内部状态 -
const arrCopy = [...nodeList]→ 对NodeList有效（生成新数组），但数组里每个元素仍是原节点引用，不是副本 -
const copy = node.cloneNode(false)→ 这才是真正的浅层复制：仅复制节点自身（不含子节点），返回全新 DOM 实例，安全可用
真正安全的“浅级复制”方式只有 cloneNode
cloneNode() 是专为 DOM 设计的复制 API，分两种模式：
-
node.cloneNode(false)：浅拷贝，只复制当前节点（属性、文本内容），不递归子节点；适用于按钮、输入框等单层元素 -
node.cloneNode(true)：深拷贝，复制节点及其全部后代；注意：克隆后需手动重新绑定事件（原监听器不会被复制） - 克隆节点是独立实体：可自由插入不同父容器，修改其属性/内容不影响原节点
为什么不能依赖通用浅拷贝工具处理 DOM
因为：
- DOM 节点不可 JSON 序列化（
JSON.stringify(node)返回undefined） - lodash 的
_.clone()对 DOM 节点也只返回空对象或抛出警告 - WeakMap 缓存、递归遍历等深拷贝逻辑无法还原节点的底层 C++ 绑定和渲染树关联
- 试图用
structuredClone(node)在现代浏览器中可行（支持 DOM 节点克隆），但兼容性有限（Chrome 98+/Firefox 101+），且仍不复制事件监听器
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
