DOM浅拷贝仅指cloneNode(false)，它复制节点自身属性和文本内容但不复制子节点、事件监听器；Object.assign或展开运算符对DOM节点无效，因其为只读宿主对象。
浅拷贝 DOM 节点本身不适用——cloneNode(false) 是 DOM 层面的“浅复制”，它复制的是节点结构（含属性、样式、文本内容），但不复制子节点；而 JavaScript 中常说的“浅拷贝对象”（如 Object.assign 或展开运算符）对 DOM 节点完全无效，因为 DOM 节点是只读的宿主对象，不能用普通对象方法拷贝其属性。
什么是 DOM 浅拷贝：cloneNode(false)
DOM 的“浅拷贝”特指 node.cloneNode(false)，它只复制当前节点自身，不递归复制子元素：
- 保留所有 HTML 属性（
id、class、data-*、style等） - 保留文本内容（如果是文本节点或含文本的元素）
- 不复制任何子节点（比如
<div><p>hello</p></div>拷贝后变成空<div></div>） - 不复制绑定的事件监听器（这是关键：事件不会被继承）
什么时候该用 cloneNode(false)
适合需要“复用结构模板但清空内容”的场景：
- 重置表单字段：复制一个带
class="input-field"和占位符的<input>，再清空value后插入 - 生成空白列表项：从已有
<li class="item template">复制一个干净副本，再填新数据 - 构建骨架屏：用已定义样式的空容器快速生成占位结构
如何安全地补全属性与行为
由于 cloneNode(false) 不带事件、也不自动更新动态属性，需手动处理：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 修改关键属性：如设置
clonedInput.value = ""、clonedLi.dataset.id = newId - 重新绑定事件：不能靠拷贝，必须显式调用
clonedBtn.addEventListener("click", handler) - 避免 ID 冲突：若原节点有
id，应清除或重设（cloned.id = "new-id-" + Date.now()） - 注意表单控件状态：
checked、selected、disabled等布尔属性需单独赋值
不要混淆：Object.assign 无法拷贝 DOM 节点属性
以下写法无效且危险：
const badCopy = Object.assign({}, originalDiv); // 报错或返回空对象const alsoBad = {...originalDiv}; // 得到一个几乎不含可用属性的对象
DOM 元素不是普通 JS 对象，它的属性（如 className、innerHTML）是访问器（getter/setter），不能通过对象扩展方式批量读写。强行操作可能静默失败或破坏节点。
