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"），否则可能解析失败或忽略命名空间
示例：
企业软件介绍主页html模板
下载
一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。
const parser = new DOMParser();
const htmlDoc = parser.parseFromString("Hello
", "text/html");
console.log(htmlDoc.body.firstElementChild.textContent); // "Hello"
const xmlStr = "
用 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 等库模拟
