JavaScript将XML转为字符串 JS XMLSerializer对象使用详解

2次阅读

xmlserializer.serializetostring() 是最直接的转换方法,专用于将 document、element 等 dom 节点序列化为标准 xml 字符串,不解析不校验,快且可靠;须传真实节点,ie 不支持需 fallback。

JavaScript将XML转为字符串 JS XMLSerializer对象使用详解

XMLSerializer.serializeToString() 是最直接的转换方法

浏览器环境里,XMLSerializer 就是专干这事的——把 DocumentElement 或其他节点转成标准 XML 字符串。它不处理解析,也不校验格式,只做序列化,所以快、轻、可靠。

常见错误现象:TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'。根本原因是传了字符串、NULL、或非 DOM 节点(比如 jquery 对象innerHTML 返回值)。

  • 必须传入真实 DOM 节点,例如 document.documentElementxmlDoc.querySelector('item')
  • 不能传字符串,哪怕内容是合法 XML;也不能传 XMLHttpRequest.responseXML 的原始值(得先取 .documentElement
  • 注意兼容性:IE 不支持 XMLSerializer,需用 xmlNode.xml(仅 IE6–IE11),但该属性不是标准,且对非 IE 浏览器无效

示例:

const serializer = new XMLSerializer(); const xmlStr = serializer.serializeToString(xmlDoc.documentElement); // ✅ 正确 // const xmlStr = serializer.serializeToString('<root></root>'); // ❌ 报错

处理 XML 文档对象前,确认它是有效 DOM 节点

很多人卡在“明明有 XML 数据,却转不了字符串”,问题往往出在源头——没真正拿到 DOM 节点。比如用 DOMParser 解析后忘记取 .documentElement,或误把 responseText 当作已解析对象。

立即学习Java免费学习笔记(深入)”;

使用场景:从接口获取 XML 字符串、本地构造 DocumentFragment、动态生成 SVG 元素等,都需要先确保操作目标是节点。

  • DOMParser 解析后返回的是 Document,要转字符串通常传 doc.documentElement,而非整个 doc(否则可能带 <?xml ...?> 声明,视浏览器而定)
  • new DOMParser().parseFromString(xmlString, 'text/xml') 后,务必检查 parserError:若 doc.querySelector('parsererror') 存在,说明 XML 格式非法,此时 serializeToString() 仍会执行但结果不可靠
  • 动态创建的 XMLHttpRequest,如果设了 responseType = 'document',响应体是 Document,可直接用;设为 'text' 则必须先解析

序列化结果不含缩进,也不自动补全命名空间

XMLSerializer.serializeToString() 输出的是紧凑格式:无换行、无缩进、无多余空格。它也不会帮你补全未显式声明的命名空间前缀,哪怕节点实际继承自父级上下文。

性能影响:这是有意设计——跳过格式化能显著提升速度,尤其对大型文档。如果你需要可读性输出,得自己加处理(比如用 XMLSerializer + 正则/AST 格式化,或引入轻量库如 xml-formatter)。

  • 命名空间问题典型表现:序列化后出现 <tag xmlns:ns0="..."></tag>,而不是你期望的 <tag></tag>。这是因为节点创建时没正确设置 namespaceURI,或未在父节点中声明前缀
  • 无法控制是否输出 <?xml version="1.0" encoding="UTF-8"?> —— 它取决于传入节点类型:Document 可能包含,Element 一定不包含
  • 不处理 CDATA、注释、DOCTYPE 等特殊节点的“美化”,原样输出其序列化形式

IE 兼容方案只能 fallback,不能混用

IE6–IE11 不支持 XMLSerializer,但提供非标准的 node.xml 属性。这个属性只在 IE 下存在,其他浏览器访问会返回 undefined,且行为不一致(比如对 Document 返回空字符串)。

容易踩的坑:有人写 node.xml || serializer.serializeToString(node),看似安全,实则在 chrome/firefoxnode.xmlundefined,没问题;但在 edge(旧版)中它可能是个函数,导致意外调用报错。

  • 正确判断方式是检测构造函数typeof XMLSerializer !== 'undefined',而不是检测实例方法或属性
  • IE fallback 应严格限定范围:if (window.ActiveXObject || 'msMaxTouchPoints' in window) 不够准,建议用 !!document.all && !window.atob(粗略但实用)或直接 UA 检测(仅限明确知道目标 IE 版本时)
  • 不要试图让同一份代码同时走两套逻辑;分离路径更清晰,比如封装一个 xmlToString(node) 函数,在内部按环境分支

复杂点在于:XML 构建和序列化常嵌在异步链中(如 fetch → parse → modify → serialize),一旦兼容层介入,错误和调试路径就变长。最容易被忽略的是——你以为传进去的是节点,其实上一步已经出错返回了 null,而 serializeToString(null) 在现代浏览器里静默失败(返回空字符串),在 IE 里直接抛异常。查起来很费时间。

text=ZqhQzanResources