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 等库模拟