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("<div><p>Hello</p></div>", "text/html");
console.log(htmlDoc.body.firstElementChild.textContent); // "Hello"
const xmlStr = "<root><item id='1'/></root>";
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)); // "<div><p>Hello</p></div>"
配合使用：修改后再转回字符串
这是常见工作流：字符串 → DOM → 修改节点 → 转回字符串。比正则替换更可靠，尤其涉及嵌套、属性、特殊字符时。
- 先用 DOMParser 解析，再用 querySelector / appendChild / setAttribute 等方法操作
- 操作完成后，用 XMLSerializer 把目标元素（或 document.documentElement）序列化
- 注意：HTML 中 script/style 标签的内容不会被自动执行，只是文本节点，安全
示例（给所有链接加 target="_blank"）：
const html = "<a href='#'>Link</a><a href='https://ex.com'>Ext</a>";
const doc = new DOMParser().parseFromString(html, "text/html");
doc.querySelectorAll("a").forEach(a => a.target = "_blank");
const result = new XMLSerializer().serializeToString(doc.body);
// "<body><a href="#" target="_blank">Link</a><a href="https://ex.com" target="_blank">Ext</a></body>"
注意事项和兼容性
这两个 API 在现代浏览器中支持良好（Chrome 1+、Firefox 2+、Safari 3.1+、Edge 12+），但仍有细节需留意：
- DOMParser 解析失败时不会抛异常，而是返回含
<parsererror></parsererror>的文档，需手动检查 - XMLSerializer 对 HTML 文档序列化时，会标准化大小写（如
<div> → <code><div>）、添加缺失结构，不保留原始格式缩进 <li>不支持序列化 Shadow DOM 内容（仅限 light DOM）</li> <li>服务端 Node.js 不原生支持，需用 jsdom 等库模拟</li> </div>
