dom节点深拷贝唯一标准方式是clonenode(true)，它递归复制所有后代节点但不复制事件监听器、表单实时值、js自定义属性，且克隆后为孤儿节点需手动插入，id需重置以防冲突。
DOM 节点不能用 structuredClone() 或 JSON 方式深拷贝，必须用原生的 cloneNode()，但要注意它不是通用对象意义上的“深拷贝”，而是专为 DOM 结构设计的节点复制方法。
用 cloneNode(true) 复制整棵子树
这是处理 DOM 节点深拷贝的唯一标准方式：
-
node.cloneNode(false)只复制节点自身（标签、属性），不带子内容； -
node.cloneNode(true)才递归复制所有后代节点、文本、注释等结构； - 必须显式传参
true，不能省略——现代浏览器默认值是false，省略会意外得到浅拷贝。
克隆后要手动处理几类关键问题
即使用了 true，以下内容也不会自动复制，需额外补全：
-
事件监听器：
addEventListener绑定的函数完全丢失，需重新绑定或提前提取逻辑复用； -
表单实时值：如
<input value="初始">克隆后仍显示“初始”，但用户已输入的内容（input.value）不会保留，需手动同步：clonedInput.value = originalInput.value； -
ID 冲突：克隆节点保留原始
id属性，插入文档前应重置（如加后缀），避免getElementById返回错误节点； -
JS 自定义属性：像
el.data = {x: 1}或el.dataset.xxx中的dataset会被复制（属于 HTML 属性），但直接挂载的 JS 属性不会。
克隆节点是孤儿，必须挂载才能生效
cloneNode 返回的是脱离 DOM 的独立副本：
- 其
parentNode为null，不会自动渲染； - 需调用
parent.appendChild(clonedNode)、insertBefore等方法手动插入； - 若原节点在文档片段或临时容器中，克隆后也需确认目标父节点存在且可操作。
其他节点类型有特殊行为
不同节点克隆时表现不一，需留意：
- script 标签：克隆后不会自动执行，除非插入时触发解析（多数现代浏览器已禁用此行为）；
-
iframe：只复制 HTML 结构，内部
document、历史状态、脚本运行环境全部丢失； - 文本节点：内容被复制为新对象，修改原文本不影响克隆体；
-
注释节点：会被
cloneNode(true)正常包含。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
