在 JavaScript 深拷贝的实际应用中，DOM 节点的复制始终是容易出错的环节。很多开发者习惯使用 structuredClone() 或 JSON 序列化解析来处理对象拷贝，但面对 DOM 结构时，这两种方式都无法生效。真正可靠的方案只有原生的 cloneNode() 方法。不过需要明确的是：它与常规意义上的“深拷贝”本质不同，它是专门为 DOM 树设计的节点复制接口，使用时存在不少关键细节。
使用 cloneNode(true) 复制完整子树
这是处理 DOM 节点深拷贝的唯一标准方法，调用方式非常直观：
node.cloneNode(false)仅复制节点本身——标签和属性会被保留，但所有子节点都不会被携带；node.cloneNode(true)会递归复制所有后代节点，包括文本、注释、子标签等全部内容；- 注意参数
true必须显式传递——现代浏览器默认值为false，省略参数相当于执行浅拷贝，实际效果可能与预期相距甚远。
克隆完成后需要手动处理几个关键问题
即使传入了 true，仍有部分内容不会自动复制，需要额外补充：
- 事件监听器：通过
addEventListener注册的函数全部丢失。如果需要复用事件逻辑，要么重新绑定，要么预先将处理函数提取出来并复用； - 表单实时值：例如
，克隆后仍显示“初始”，但用户后续输入的内容（input.value）不会被携带。需要手动同步：clonedInput.value = originalInput.value； - ID 冲突：克隆节点保留了原始
id属性。如果将它们全部插入文档，getElementById将返回混乱的结果。建议在插入前重置 ID，例如添加唯一后缀； - JS 自定义属性：直接挂载的 JavaScript 属性（如
el.data = {x: 1}）不会被复制，但dataset属性因为映射到 HTML 的data-*属性，所以会一并被携带。
克隆后的节点是孤立节点，必须挂载才能生效
cloneNode 返回的是一个脱离 DOM 树的独立副本——其 parentNode 为 null，不会自动渲染。需要通过 parent.appendChild(clonedNode) 或 insertBefore 等方法手动插入文档。如果原节点位于文档片段或临时容器中，克隆后还需确保目标父节点存在且可操作，否则无法成功插入。
其他节点类型存在特殊表现
不同节点类型在克隆时行为各异，需要特别留意：
- script 标签：克隆后不会自动执行。即使插入时浏览器触发解析，绝大多数现代浏览器也已禁用此行为；
- iframe：仅复制 HTML 结构，内部
document、历史状态、脚本运行环境全部丢失； - 文本节点：内容被复制为新对象，修改原文本不会影响克隆体；
- 注释节点：会正常被
cloneNode(true)包含。
