DOM节点无法用structuredClone等通用方法深拷贝，必须用cloneNode()；含DOM的对象需分层处理，纯JS数据用structuredClone，DOM节点单独cloneNode；事件需手动重绑，jQuery clone(true)仅限其生态且不推荐。
直接对包含 DOM 节点的对象做“深拷贝”不可行 —— structuredClone、JSON.parse(JSON.stringify())、递归函数等通用深拷贝方法，全部会抛错或静默丢弃 DOM 节点。因为 DOM 元素是宿主对象，不属于 JavaScript 可序列化的值类型范围。
DOM 节点本身只能用 cloneNode 处理
如果目标是复制一个 DOM 元素（及其子树），唯一标准、可靠的方式是调用原生的 cloneNode()：
-
el.cloneNode(false)：只复制自身，不带子节点 -
el.cloneNode(true)：深度复制整个子树结构、属性、文本内容 - 注意：无论是否 deep，都不会复制事件监听器、表单当前值（如 input.value）、自定义 JS 属性
- 若原节点有
id，克隆后需手动修改，避免文档中 ID 重复
含 DOM 节点的对象需“分层处理”
假设你有一个类似这样的对象：
const data = {
title: "用户卡片",
container: document.querySelector("#card"),
config: { theme: "dark", editable: true }
};
不能整块 structuredClone 或 JSON 序列化。正确做法是：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 识别并单独提取 DOM 节点字段（如
container） - 用
container.cloneNode(true)创建新节点副本 - 对剩余纯 JS 数据（
title、config）用structuredClone()或其他方式深拷贝 - 最后组合成新对象：
{ title, container: clonedEl, config: clonedConfig }
需要保留事件？得重新绑定
cloneNode 不复制事件是规范行为，不是缺陷。若业务要求克隆后仍有交互能力，必须显式重建：
- 提前把事件逻辑封装成可复用函数（如
handleClick()） - 克隆后立即调用
clonedEl.addEventListener("click", handleClick) - 或使用事件委托，把监听器挂在父容器上，避免为每个克隆体重复绑定
jQuery clone(true) 是个例外，但仅限 jQuery 环境
jQuery 的 .clone(true) 会复制通过 .on() 绑定的事件处理器 —— 它靠内部缓存事件数据实现，并非真正克隆监听器本身。该行为：
- 只适用于 jQuery 绑定的事件，不兼容原生
addEventListener - 依赖 jQuery 的事件系统，现代项目中已不推荐作为主流方案
- 仍无法复制表单实时值、自定义属性等运行时状态
