xmlserializer.serializetostring 会丢失 html 特有行为,如 input 的当前 value、textarea 的实时内容,且输出带命名空间的 xml 字符串,不适用于直接插入 html;innerhtml 才反映真实渲染状态。

XMLSerializer.serializeToString 会丢失 HTML 特有行为
XMLSerializer 是 XML 工具,不是 HTML 序列化器。它把 DOM 节点当标准 XML 处理,所以:
• <input> 的当前值(value 属性)不会写入序列化结果
• <textarea></textarea> 的文本内容(非 value 属性)会被忽略,只输出初始 textContent
• 自闭合标签如 <img>、<br> 可能被输出为 <img>(XML 风格),部分旧浏览器或校验工具不认
• <script></script> 和 <style></style> 内容可能被转义或截断(取决于节点是否已解析为文本子节点)
用 innerHTML 更直接,但要注意作用域限制
如果目标只是获取某个元素内部的 HTML 字符串,element.innerHTML 最常用也最可靠:
• 它反映当前渲染状态(含用户输入、JS 修改后的 value、checked 等)
• 不支持序列化整个文档(document.documentElement.innerHTML 可用,但 document.body.innerHTML 丢 )
• 不能跨 iframe 访问(同源限制下才可读取 iframe.contentDocument 的 innerHTML)
• 对 document 本身无效(document.innerHTML 是 undefined)
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
需要完整 HTML 文档字符串?用 doctype + documentElement.outerHTML
想导出带 和 <code> 根的完整 HTML 字符串,不要拼接:
• 先用 document.doctype 判断是否存在,再手动构造 doctype 字符串(document.doctype ? `{document.doctype.name}>` : '')
• 接着拼上 document.documentElement.outerHTML
• 注意:如果页面是 XHTML 模式(Content-Type: application/xhtml+xml),outerHTML 仍可用,但属性顺序和大小写可能与原始源不同
• XMLSerializer 在这种场景下反而更不可靠——它会把 doctype 当作注释处理,或完全忽略
真要用 XMLSerializer?务必先 cloneNode 并清理副作用
极少数场景(比如需严格 XML 兼容性、或处理非 HTML 命名空间节点)才考虑 XMLSerializer:
• 先调用 node.cloneNode(true),避免污染原 DOM
• 手动同步表单控件状态到属性:inputEl.setAttribute('value', inputEl.value)、textareaEl.textContent = textareaEl.value
• 移除或重置 onxxx 行内事件(removeAttribute('onclick')),否则序列化后可能残留 JS 字符串
• 调用前确认节点不在文档中(已 detach),否则某些浏览器会抛 DOMException
<div>,它也可能返回 <code><div xmlns="http://www.w3.org/1999/xhtml">…</div> —— 这个命名空间在大多数 HTML 上下文中是冗余甚至有害的。










