cloneNode(true) 深拷贝节点及其全部子节点；cloneNode(false) 浅拷贝仅当前节点标签、属性，不复制子节点（含文本），默认参数为 false，ID 冲突、事件监听器丢失、表单值不同步需手动处理，跨文档克隆须用 importNode。
cloneNode(true) 和 cloneNode(false) 的行为差异
传 true 是深拷贝：复制节点自身 + 所有子节点（含文本节点、元素节点、注释节点），结构完全一致；传 false 是浅拷贝：只复制当前节点的标签名、属性（如 class、id、data-* ）、命名空间，但不复制任何子节点——连 “Hello” 这样的文本内容都会丢失。
常见错误现象：
- 对
<div>content</div>调用.cloneNode(false)，得到的是空的<div></div> - 误以为
cloneNode()不带参数时默认深拷贝——实际规范已明确默认值为false，省略参数等于false，必须显式传参
为什么 cloneNode(false) 在多数场景下几乎没用
浅拷贝仅保留容器“壳”，丢弃全部内容和结构，无法直接插入文档复用。除非你明确需要一个干净骨架再手动填充，否则它带来的不是便利而是陷阱。
适用场景极窄，仅限于：
立即学习“前端免费学习笔记（深入）”；
- 批量生成空容器（如统一 class 的
<div class="card"></div>），后续用innerHTML或appendChild重写内容 - 临时占位、测试 DOM 结构初始化逻辑
- 性能敏感且子树极深的极端情况（但通常应优先考虑
DocumentFragment或模板字符串）
注意：id 属性会被原样复制，浅拷贝后若直接 appendChild 到同一文档，会造成重复 ID —— 浏览器不会报错，但会破坏 CSS 选择器、document.getElementById 行为及可访问性（ARIA）。
cloneNode(true) 后必须手动处理的三件事
深拷贝虽完整，但 DOM 节点不是“即插即用”的快照。以下问题不会自动解决，必须在克隆后主动干预：
-
ID 冲突：新节点继承原
id，需用newNode.id = 'new-id'重设，或删掉id属性（newNode.removeAttribute('id')） -
表单控件状态丢失：
<input value="xxx">的value属性值不变，但用户输入的实时值（input.value）不会被拷贝；需手动同步：newInput.value = originalInput.value -
事件监听器完全不复制：无论
true还是false，通过addEventListener绑定的监听器都不会出现在副本上；必须重新绑定，或改用事件委托
跨文档克隆要用 importNode，不是 cloneNode
如果目标是把节点从 iframe 或其他 document 中复制到当前文档，cloneNode 会失败或产生不可预期行为（如节点归属错误、样式丢失）。此时必须用 document.importNode(node, true)，它专为跨文档节点迁移设计。
容易忽略的一点：即使同源 iframe，其 contentDocument 下的节点也属于另一个文档环境，cloneNode 返回的副本仍归属原文档，直接 appendChild 到当前文档会触发 DOM 异常（如 HierarchyRequestError）。
