跳转到主内容
极星编程网:以代码为星,赴技术山海!

JavaScript中DOMParser和XMLSerializer的用法_JavaScript中DOMParser和XMLSerializer使用教程

DOMParser用于将XML或HTML字符串解析为DOM对象,XMLSerializer则将DOM对象序列化为字符串。1. 使用DOMParser的parseFromString方法可解析字符串:const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlString, "text/xml"); 2. 解析HTML时使用"text/html"类型,节点通常位于htmlDoc.body下;3. XMLSerializer通过serializeToString方法将DOM转为字符串:const serializer = new XMLSerializer(); const result = serializer.serializeToString(element); 4. 常见用途包括处理Ajax返回的XML、动态生成HTML结构、在Web Worker中操作DOM片段;5. 兼容性良好,支持IE9+,解析错误不会抛异常,需检查parsererror元素判断;6. 序列化结果符合XML规范,标签大小写敏感,属性带引号。两者配合实现字符串与DOM的双向转换。 在JavaScript中处理XML或HTML字符串与DOM对象之间的转换时, DOMParser 和 XMLSerializer 是两个非常实用的原生API。它们可以帮助你在字符串和可操作的DOM节点之间自由转换,适用于解析响应数据、动态生成内容或操作结构化文档。 DOMParser:将 字符串解析 为DOM对象 DOMParser 可以将XML或HTML格式的字符串解析成DOM文档或片段,便于后续操作。 基本用法: 创建一个 DOMParser 实例,调用其 parseFromString() 方法: 立即学习 “ Java免费学习笔记(深入) ”; 第一个参数是待解析的字符串 第二个参数指定内容类型,如
"text/xml"
、
"text/html"
等 例如,解析一段XML字符串:
const xmlString = ` JavaScript高级程序设计 Nicholas `; const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlString, "text/xml"); // 获取 title 元素的内容 const title = xmlDoc.querySelector("title").textContent; console.log(title); // 输出:JavaScript高级程序设计
如果是处理HTML字符串,可以使用
"text/html"
类型:
const htmlString = "

这是一条提示

"; const parser = new DOMParser(); const htmlDoc = parser.parseFromString(htmlString, "text/html"); const div = htmlDoc.body.firstChild; // 获取 div 元素
注意:对于HTML,通常解析的是
内容,因此需要从
htmlDoc.body
中提取节点。 Comet AI 浏览器 下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 XMLSerializer:将DOM对象序列化为字符串 与 DOMParser 相反,XMLSerializer 可以将DOM节点或文档重新转换为字符串形式,常用于保存或传输修改后的结构。 基本用法: 创建 XMLSerializer 实例,调用 serializeToString() 方法传入DOM节点:
const serializer = new XMLSerializer(); // 将之前解析的 xmlDoc 转回字符串 const resultXml = serializer.serializeToString(xmlDoc); console.log(resultXml); // 输出原始XML结构(可能格式略有不同)
也可以序列化单个元素:
const divElement = document.createElement("div"); divElement.textContent = "Hello World"; divElement.setAttribute("class", "demo"); const serialized = serializer.serializeToString(divElement); console.log(serialized); //
Hello World
实际应用场景 这两个API配合使用,在以下场景中特别有用: 处理Ajax返回的XML数据 :服务器返回XML字符串,可用 DOMParser 解析后提取信息 动态构建HTML结构并转为字符串 :先创建DOM元素,修改完成后用 XMLSerializer 输出字符串(如用于日志、存储) 在Worker中操作DOM片段 :虽然Worker中不能直接访问页面DOM,但可以使用 DOMParser 解析字符串进行轻量处理 注意兼容性:DOMParser 和 XMLSerializer 在现代 浏览器 中支持良好,包括IE9+。若需支持更老版本,建议结合 polyfill 或使用其他方式(如 innerHTML 配合临时容器)替代HTML解析。 常见问题 与注意事项 使用过程中需留意以下几点: 解析XML出错时,
parseFromString()
不会抛异常,而是返回包含错误信息的文档,可通过检查根元素是否为
parsererror
判断:
const badXml = ""; const doc = parser.parseFromString(badXml, "text/xml"); if (doc.querySelector("parsererror")) { console.error("XML格式错误"); }
XMLSerializer 输出的是标准XML格式字符串,标签大小写敏感,属性带引号,适合规范输出 对HTML序列化时,某些自定义属性或非标准结构可能被规范化 基本上就这些。DOMParser 和 XMLSerializer 组合使用,能高效完成字符串与DOM之间的双向转换,是处理结构化文档内容的可靠工具。

相关文章