不能直接用，尤其当编辑器内容含script、style或自定义属性时；xmlserializer严格按xml规则处理，输出语法合法但非原始源码的字符串，适用于xhtml导出、模板对接或dom快照diff。
XMLSerializer 能不能直接序列化编辑器里的 DOM？
不能直接用，尤其当编辑器内容含 script、style 或自定义属性时。XMLSerializer 会严格按 XML 规则处理：把未声明的命名空间属性丢弃、把 <div> 里没闭合的 <code><br> 变成 <br>，甚至可能把 innerHTML 里用户手写的 <img src="x" onload="alert(1)"> 中的 onload 当作非法属性直接过滤掉——这不是 bug，是它本意就是输出「可解析的 XML」，不是「和原始 HTML 一模一样的字符串」。
为什么不用 innerHTML 而要用 XMLSerializer？
因为 innerHTML 不处理命名空间、不标准化空元素、不转义特殊字符（比如用户输入了 <foo>&</foo>，innerHTML 会原样返回，但解析时可能出错），而 XMLSerializer 至少保证输出是语法合法的 XML/HTML5 兼容字符串。典型适用场景：导出为 XHTML、对接需要严格格式的后端模板引擎、做 DOM 快照用于 diff 对比。
- 必须先确保目标节点是标准
DocumentFragment或Element，不能传document.body这种带完整文档结构的节点，否则会多出... - 如果编辑器内容来自
contenteditable区域，建议先用range.cloneContents()提取干净片段，再传给XMLSerializer -
XMLSerializer.serializeToString(node)返回的是 XML 格式字符串，若需 HTML5 语义（如<input>不闭合），得手动替换/]*)\/>/g→，但注意别误伤自闭合 SVG 元素
常见错误：序列化后丢失 class、data-* 属性或事件监听器
这是正常行为。XMLSerializer 只序列化 DOM 结构和属性，不保存 JS 绑定的事件监听器（addEventListener）、不保留通过 element.classList 动态增删的 class（只保留初始 class="..." 字符串）、也不保留 data- 属性以外的自定义属性（比如 myattr="1" 会被忽略）。如果你看到输出里没有 class，检查原始节点是否真的有 class 属性（el.hasAttribute('class')），而不是仅靠 el.className 判断。
- 修复 class 缺失：确保编辑器插入节点时用
el.setAttribute('class', 'a b')，而非el.className = 'a b' - data-* 属性安全：只要属性名符合
data-xxx命名规范，XMLSerializer会保留它 - 避免传入含
xmlns的节点：如果编辑器内嵌了 SVG 或 MathML，XMLSerializer会自动添加命名空间声明，导致字符串变长且难读；可临时移除xmlns属性再序列化（但需自行记录并还原）
兼容性与性能注意点
XMLSerializer 在所有现代浏览器中可用（包括 Edge 16+），但 Node.js 环境下不可用——服务端想做同样事得用 jsdom + serializeDocument 或 parse5。性能上，它比 innerHTML 慢约 2–3 倍，对超长富文本（>10KB）建议节流或分块处理。
- 不要在循环中反复 new
XMLSerializer()：复用同一个实例即可 - 若编辑器支持撤销栈，序列化前先
node.normalize()，避免文本节点碎片化影响输出可读性 - 遇到
DOMException: Node cannot be cloned错误，说明节点含不可克隆对象（如canvas.getContext('2d')），需提前剥离或占位
真正麻烦的不是怎么调用 XMLSerializer.serializeToString，而是你得清楚自己要的是「结构等价」还是「字面等价」——前者用它很稳，后者就得老老实实用 innerHTML 加手工校验。
