JS的DOMParser和XMLSerializer怎么用

DOMParser 和 XMLSerializer 是浏览器原生 API，分别用于字符串与 DOM 对象互转：前者用 parseFromString() 解析 HTML/XML 字符串为 Document，后者用 serializeToString() 将节点序列化为字符串；配合使用可安全修改 HTML 再转回字符串。

DOMParser 和 XMLSerializer 是浏览器中处理 HTML/XML 字符串与 DOM 对象互转的两个核心 API。前者把字符串解析成文档对象，后者把文档对象序列化回字符串。它们不依赖外部库，轻量且原生支持好。

用 DOMParser 解析 HTML 或 XML 字符串

DOMParser 可以将一段字符串安全地转为可操作的 Document 对象，常用于动态生成 DOM、解析远程 HTML 片段或校验 XML 结构。

创建实例后调用 parseFromString()，传入字符串和 MIME 类型（"text/html" 或 "application/xml"）
对 HTML 字符串，推荐用 "text/html"，这样会走标准 HTML 解析器，自动修复常见错误（如缺失闭合标签）
对 XML 字符串，必须用 "application/xml"（或 "text/xml"），否则可能解析失败或忽略命名空间

示例：

const parser = new DOMParser();
const htmlDoc = parser.parseFromString("Hello", "text/html");
console.log(htmlDoc.body.firstElementChild.textContent); // "Hello"

const xmlStr = "";
const xmlDoc = parser.parseFromString(xmlStr, "application/xml");
if (xmlDoc.querySelector("parsererror")) {
  console.error("XML 解析出错");
}

用 XMLSerializer 序列化 DOM 回字符串

XMLSerializer 主要用于把 Document、Element 等节点对象还原成字符串，适合做 DOM 快照、生成 HTML 模板、提取子树内容等。

只接受 Node 实例（如 document、element、documentFragment），不能传字符串或普通对象
对 HTML 文档，输出的是“序列化后的 HTML”，不是原始源码（比如会补全结构）
若只想序列化某个元素及其子内容，直接传该 element 即可，无需整个 document

示例：

const serializer = new XMLSerializer();
const div = htmlDoc.querySelector("div");
console.log(serializer.serializeToString(div)); // "Hello"

配合使用：修改后再转回字符串

这是常见工作流：字符串 → DOM → 修改节点 → 转回字符串。比正则替换更可靠，尤其涉及嵌套、属性、特殊字符时。

先用 DOMParser 解析，再用 querySelector / appendChild / setAttribute 等方法操作
操作完成后，用 XMLSerializer 把目标元素（或 document.documentElement）序列化
注意：HTML 中 script/style 标签的内容不会被自动执行，只是文本节点，安全

示例（给所有链接加 target="_blank"）：

const html = "LinkExt";
const doc = new DOMParser().parseFromString(html, "text/html");
doc.querySelectorAll("a").forEach(a => a.target = "_blank");
const result = new XMLSerializer().serializeToString(doc.body);
// "LinkExt"

注意事项和兼容性

这两个 API 在现代浏览器中支持良好（Chrome 1+、Firefox 2+、Safari 3.1+、Edge 12+），但仍有细节需留意：

DOMParser 解析失败时不会抛异常，而是返回含的文档，需手动检查
XMLSerializer 对 HTML 文档序列化时，会标准化大小写（如 → ）、添加缺失结构，不保留原始格式缩进
不支持序列化 Shadow DOM 内容（仅限 light DOM）


  服务端 Node.js 不原生支持，需用 jsdom 等库模拟

# html # js # node.js # node # 浏览器 # app # edge # safari # 字符串解析 # firefox # chrome # 命名空间 # xml # 字符串

返回目录在线咨询

上一篇：景安快云助手：批量建站一键生成，多站点高效管理方案
下一篇：thrift安装遇到的问题以及解决方法(必看篇)

您的项目需求