JS中拷贝含DOM节点的对象需分步处理：先用structuredClone深拷贝纯JS部分，再遍历识别Node实例并调用cloneNode(true)克隆，最后注入新对象；不可直接用structuredClone或JSON方法，否则报错或丢失DOM字段。
JS 中拷贝“包含 DOM 节点的特殊对象”，本质是处理两类混合数据：一是普通 JS 对象（如配置、状态、嵌套结构），二是不可序列化的 DOM 元素。DOM 节点本身不能被 structuredClone 或 JSON 方法拷贝，也不能直接参与深拷贝逻辑，必须单独提取、克隆、再注入。
明确 DOM 节点不能进通用深拷贝流程
像 structuredClone()、JSON.parse(JSON.stringify())、或手写递归深拷贝函数，都会在遇到 DOM 节点时失败或跳过——因为 DOM 节点不是可序列化值，它属于宿主环境对象，没有标准的拷贝语义。一旦对象里有 el: document.querySelector('button') 这样的属性，整个深拷贝就会中断或丢失该字段。
-
structuredClone({ el: div })→ 抛出DataCloneError -
JSON.stringify({ el: div })→ 返回{}（空对象） - 手写递归若未显式判断
node instanceof Node，会陷入无限循环或报错
分步处理：分离 + 克隆 + 组装
推荐做法是把“含 DOM 的对象”看作一个复合结构，先拆解，再分别处理：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 遍历原始对象，识别所有 DOM 节点（用
node instanceof Node判断） - 对非 DOM 部分用
structuredClone()深拷贝（支持 Map/Set/Date/ArrayBuffer 等） - 对每个 DOM 节点调用
.cloneNode(true)，并手动修正id、name等需唯一性的属性 - 将克隆后的 DOM 节点重新挂载回拷贝后的对象结构中
示例代码：
function cloneObjectWithDOM(obj) {
if (obj === null || typeof obj !== 'object') return obj;
// 先深拷贝纯 JS 部分（不含 DOM）
const cloned = structuredClone(obj);
// 递归还原 DOM 字段
function restoreDOM(target, source) {
for (const key in source) {
if (source.hasOwnProperty(key)) {
const val = source[key];
if (val instanceof Node) {
const clone = val.cloneNode(true);
clone.id = clone.id ? clone.id + '-copy' : '';
target[key] = clone;
} else if (val && typeof val === 'object') {
restoreDOM(target[key], val);
}
}
}
}
restoreDOM(cloned, obj);
return cloned;
}
替代方案：只存引用或序列化 HTML
如果目标只是“复用视觉与结构”，不一定非要保留原 DOM 实例。两种轻量思路：
-
存 outerHTML 字符串：把 DOM 节点转成 HTML 字符（
el.outerHTML），整个对象就变成纯 JSON 友好结构；需要时用DOMParser或insertAdjacentHTML解析重建 -
运行时按需获取：对象里不存 DOM 节点，只存选择器（如
selector: '#my-form'）或类型标识（如template: 'modal'），使用时再document.querySelector()或从模板生成
注意事件与状态不会自动继承
无论用哪种方式拷贝，DOM 克隆后都不会带 addEventListener 绑定的事件，也不会保留表单当前值（input.value）、滚动位置、焦点等运行时状态。如果需要交互能力，必须：
- 克隆后手动调用初始化函数绑定事件
- 或改用事件委托（监听父容器，利用冒泡捕获新节点）
- 表单值需额外同步：
clone.querySelector('input').value = original.querySelector('input').value
