cloneNode(true) 递归复制节点及其所有子节点、属性和文本内容，但不复制事件监听器、表单实时值（如input的当前value）、checked/selected状态及JS动态属性；克隆体为孤立节点，需手动处理ID冲突与状态同步。
cloneNode(true) 会复制哪些内容？
它会递归复制目标节点及其所有子节点、属性、文本内容，但不复制事件监听器、表单元素的当前值（如 <input> 的 value）、checked / selected 状态，也不会复制通过 JavaScript 动态附加的自定义属性（比如 node.myData = {...}）。
常见误判是以为它能“完整还原”一个交互中的节点——实际只是结构快照。
为什么 cloneNode(true) 后的表单控件总是空或未选中？
因为 cloneNode 只复制初始 HTML 属性（如 value="默认值" 或 checked），不复制运行时状态。例如：
<input id="name" value="张三">
用户输入变成“李四”后调用 cloneNode(true)，新节点的 value 仍是“张三”，不是“李四”。
立即学习“前端免费学习笔记（深入）”；
解决办法：手动同步关键状态：
- 对
<input>/<textarea>，克隆后显式设置newInput.value = oldInput.value - 对
<input type="checkbox/radio">，设置newInput.checked = oldInput.checked - 对
<select>，设置newSelect.selectedIndex = oldSelect.selectedIndex
克隆后插入文档前，需要处理 ID 和 name 属性吗？
需要。如果原节点有 id，克隆体也带相同 id，会导致 DOM 中出现重复 ID，破坏 document.getElementById 行为和 CSS 选择器唯一性假设。
稳妥做法是在插入前重置：
- 清除
id：cloned.id = ""或cloned.removeAttribute("id") - 若依赖
name（如表单提交），且业务逻辑要求唯一，也应重命名：cloned.name = cloned.name + "_clone_" + Date.now() - 注意：某些 UI 库（如 Bootstrap 的 modal、tooltip）靠
id关联行为，克隆后不清理会失效或报错
cloneNode(true) 在 Shadow DOM 或 iframe 中是否可用？
可以，但作用域受限。它只在当前执行上下文的 DOM 树内生效：
- 不能跨
<iframe>克隆：父页调用iframe.contentDocument.body.cloneNode(true)是合法的，但这是在 iframe 文档内操作，不是“跨域克隆” - 在 Shadow Root 中调用，只克隆该 Shadow DOM 内部节点；不克隆 host 元素本身，也不克隆 light DOM 插槽内容（除非显式遍历
shadowRoot.assignedNodes()） - 若节点含
<slot>，克隆后<slot>仍存在，但不会自动重新分配内容——它只是个占位符副本
真正容易被忽略的是：克隆不会触发任何生命周期钩子（如 connectedCallback），也不会重新解析 custom-element，克隆体是“静态结构”，不是“新实例”。
