DOM 克隆这事儿，乍一看跟普通对象深拷贝有点像，但骨子里完全是两码事。它本质上是对节点树的结构复制，而 Ja vaScript 里唯一能干这活的就一个方法——cloneNode()。关键在于，你得给它传个 true，否则它只复制皮囊，不复制灵魂。
克隆必须显式传 true 才递归复制子树
默认参数是 false，如果啥也不写，那它只会复制节点本身——比如一个 标签和它的属性，但里面的子元素、文本、注释一概不要。这就好比只复制了房子的门牌号，没搬进去任何家具。要复制完整结构，必须写 node.cloneNode(true)。这一步没有“默认行为”，也没有“自动推断”，漏掉那个 true 你拿到的就是个空壳。
cloneNode(false)：适合只取标签骨架，比如复用样式类但清空内容cloneNode(true)：复制所有后代节点、文本节点、注释节点——但仅限于 HTML 结构层面- 它不关心 JS 运行时状态，只忠实地重建 DOM 树的静态快照
克隆后不是“即插即用”，而是孤儿节点
返回的节点完全脱离文档，parentNode 为 null，也不会渲染。必须手动挂载到目标父容器中，例如：
parent.appendChild(clonedNode)parent.insertBefore(clonedNode, refNode)- 若原节点在 DocumentFragment 中，克隆后仍需确保目标
parent存在且可操作
三类关键内容不会被自动复制，需手动补全
即使用了 true，以下内容仍丢失，必须额外处理：
- 事件监听器：通过
addEventListener绑定的函数全部消失，需重新绑定或封装逻辑统一调用 - 表单实时值：如
克隆后显示“初始”，但用户已输入的内容（input.value）不会保留；需同步：clonedInput.value = originalInput.value - ID 冲突：克隆节点保留原始
id属性，插入前应重命名（如加-clone后缀），否则getElementById可能返回错误节点
特殊节点类型的行为差异需留意
不同节点克隆后表现不一致，容易踩坑：
- script 标签：结构被复制，但脚本不会自动执行（现代浏览器普遍禁用克隆 script 的执行）
- iframe：只复制 HTML 标签，内部
document、历史记录、JS 执行环境全部丢失 - 文本节点：内容被复制为新对象，修改原文本不影响克隆体
- dataset 属性：属于 HTML 属性，会被复制；但直接挂在节点上的 JS 属性（如
el.customData = {...}）不会
