在浏览器端JavaScript里，DOMParser和XMLSerializer是处理标记语言字符串的两个原生工具。DOMParser负责把XML或HTML文本变成可操作的Document对象，XMLSerializer则把DOM节点重新转成字符串，二者配合可以完成解析与导出的闭环。
DOMParser基本用法
通过new DOMParser()创建解析器实例，然后调用parseFromString方法并指定文档类型，比如text/xml、application/xml或者text/html。
// 解析XML字符串
const parser = new DOMParser();
const xmlString = '<note><to>小明</to><from>小红</from></note>';
const doc = parser.parseFromString(xmlString, 'text/xml');
// 读取节点内容
const toNode = doc.querySelector('to');
console.log(toNode.textContent); // 输出：小明
处理解析错误
当XML格式不正确时，解析结果中会包含一个parsererror节点，可以通过判断来捕获问题。
const badXml = '<note><to>小明</note>';
const docErr = parser.parseFromString(badXml, 'text/xml');
if (docErr.getElementsByTagName('parsererror').length > 0) {
console.log('XML解析失败');
}
XMLSerializer基本用法
XMLSerializer的serializeToString方法能够将任意DOM节点序列化为字符串，常用于把修改后的DOM保存下来。
const serializer = new XMLSerializer(); // 将上面解析出的doc序列化回字符串 const output = serializer.serializeToString(doc); console.log(output); // 输出：<note><to>小明</to><from>小红</from></note>
解析HTML字符串的场景
如果传入text/html类型，DOMParser会生成HTMLDocument，可以使用常规DOM API提取元素。
const htmlParser = new DOMParser();
const htmlDoc = htmlParser.parseFromString('<div class="box">内容</div>', 'text/html');
const boxText = htmlDoc.querySelector('.box').textContent;
console.log(boxText); // 内容
二者配合的常见用途
- 清洗或改写用户提交的XML与HTML片段
- 在内存中操作标记结构后再导出字符串
- 提取远程返回的XML数据中的指定字段
注意：DOMParser在解析HTML时不会执行脚本，仅构建DOM树，因此比直接赋值innerHTML更安全一些，但仍需防范XSS风险。
小结
DOMParser和XMLSerializer是浏览器原生提供的轻量工具，理解parseFromString与serializeToString的调用方式，就能在多数简单场景下替代外部库完成标记语言的转换工作。
DOMParserXMLSerializerJavaScript_DOM修改时间：2026-07-25 16:24:26