JavaScript无法直接复制DOM节点对象，只能通过outerHTML序列化为HTML字符串写入剪贴板，实现结构浅拷贝；粘贴时重建新节点，不保留事件监听器和JS属性引用。
JavaScript 中无法直接将 DOM 节点对象（如 Element 或 Node）通过剪贴板 API 复制为“对象”暂存——因为剪贴板标准只支持文本、HTML 字符串、图片 Blob 等可序列化格式，**不支持任意 JS 对象或 DOM 节点的二进制/引用级拷贝**。
但你可以实现「浅拷贝当前选中节点的结构与属性」，并以 HTML 字符串形式写入剪贴板，后续粘贴时重建一个等效的浅拷贝节点。这本质是“序列化 → 复制 → 反序列化”，不是内存中保留引用，但行为上满足多数场景需求（如富文本编辑器中的复制粘贴）。
1. 获取当前选中节点并做浅拷贝（HTML 字符串）
使用 window.getSelection() 获取选区，再提取其包围的最外层节点（或所有包含节点），调用 cloneNode(false) 得到浅拷贝，最后用 outerHTML 转为字符串：
-
注意：
cloneNode(false)只复制节点自身（不递归子节点），即真正意义上的浅拷贝；若需含子元素结构但不含事件/自定义属性，可用cloneNode(true)（仍属浅拷贝层级，因不复制绑定的 JS 属性和事件监听器） - 推荐优先用
outerHTML，它天然保留标签名、属性、内联样式，且兼容性好
2. 写入剪贴板（支持 HTML 格式）
现代浏览器支持写入多种类型，包括 text/html。这样粘贴到支持 HTML 的编辑器（如 Word、Notion、Draft.js）时能保持结构：
立即学习“Java免费学习笔记（深入）”；
- 用
navigator.clipboard.write()写入ClipboardItem - 同时写入
text/plain作为降级（纯文本内容） - 需在安全上下文（HTTPS 或 localhost）且用户手势触发（如 click）
3. 完整示例代码
点击按钮复制当前光标所在或选中的最外层元素（浅拷贝）：
async function copySelectedElement() {
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
const container = range.commonAncestorContainer;
let targetNode = container.nodeType === Node.ELEMENT_NODE
? container
: container.parentElement;
// 浅拷贝：仅自身，不含子节点（如需含子节点结构，用 cloneNode(true)）
const shallowCopy = targetNode.cloneNode(false);
// 转为 HTML 字符串（保留属性、样式等）
const htmlString = shallowCopy.outerHTML;
const textString = shallowCopy.textContent || '';
try {
await navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([htmlString], { type: 'text/html' }),
'text/plain': new Blob([textString], { type: 'text/plain' })
})
]);
console.log('✅ 已复制节点浅拷贝（HTML 格式）');
} catch (err) {
console.error('❌ 剪贴板写入失败', err);
}
}
// 绑定到按钮：<button onclick="copySelectedElement()">复制当前节点</button>
4. 注意事项与限制
-
事件监听器不会被复制：
cloneNode()不复制 JS 绑定的事件，这是预期行为，也是“浅”的体现 -
自定义属性/数据会保留：
data-*、id、class、style等 HTML 属性均在outerHTML中，会被复制 -
不能还原 DOM 引用：粘贴后生成的是新节点，与原节点无引用关系，也无法访问原节点的
.dataset以外的 JS 属性（如node.myCustomProp） -
部分富文本编辑器会过滤 HTML：实际粘贴效果取决于目标应用对
text/html的解析策略
不复杂但容易忽略：所谓“暂存节点对象”，实质是暂存它的结构快照。只要目标是复用 DOM 结构而非运行时状态，这个 HTML 浅拷贝方案既轻量又可靠。
