DOMParser 的核心作用是将 HTML/XML 字符串解析为内存中的可操作 DOM 文档对象，不触发渲染或副作用；支持完整 HTML5 语义、安全操作（如移除 script）、修改后通过 importNode 导入真实 DOM。
在 JavaScript 中，DOMParser 的核心作用就是将字符串（如 HTML 或 XML）**解析为一个完整的、可操作的 DOM 文档对象**，这个过程完全发生在内存中，**不涉及页面实际渲染或 DOM 插入**。因此，它天然适合在“生成 DOM 之前”进行节点操作——你拿到的是一个干净的、独立的文档片段，可以自由查询、修改、筛选，等准备好后再选择性地导入到真实 DOM 中。
为什么用 DOMParser 而不是 innerHTML？
innerHTML + createElement 等方式无法直接从字符串安全创建文档级结构（比如含 <html>、<head> 的完整 HTML），且会触发副作用（如脚本执行、图片加载）；而 DOMParser 解析的是纯文档对象，无副作用，支持完整 HTML5 语义，且返回的是标准 Document 实例，可直接使用 querySelector、appendChild 等全部 DOM API。
基本流程：解析 → 操作 → 导入
三步清晰分离，确保“操作发生在插入前”：
- 用
new DOMParser().parseFromString(htmlString, 'text/html')得到一个Document对象 - 在这个新文档上使用
querySelector、getElementById、remove()、setAttribute()等任意操作 - 用
document.importNode()将处理好的节点（或其子节点）导入当前文档，再挂载到真实 DOM
常见实用操作示例
假设你有一段用户提交的 HTML 字符串，需清洗、提取、改写后再插入：
立即学习“Java免费学习笔记（深入）”；
const htmlStr = `<div class="card"> <h2>标题</h2> <p>内容</p> <script>alert(1)</script> </div>`;
-
安全移除 script 标签：解析后直接调用
doc.querySelectorAll('script').forEach(s => s.remove()) -
重写 class 并添加 data-source：用
doc.querySelector('.card').className = 'safe-card'; doc.body.firstElementChild.dataset.source = 'user-input'; -
只取其中某部分（如仅 p 标签）：用
doc.querySelector('p')获取节点，再通过importNode(pNode, true)深拷贝后插入 -
批量修改样式属性：遍历所有
img，设置img.style.maxWidth = '100%'，不影响原字符串逻辑
注意 importNode 的关键细节
document.importNode(node, deep) 是连接“解析文档”和“当前文档”的桥梁：
-
deep = true表示深拷贝（包含所有子节点），适用于整个结构；false只拷贝当前节点（常用于只取父容器） - 必须用当前页面的
document来调用importNode，不能用解析得到的doc - 导入后的节点才具备事件绑定、CSS 生效、布局计算等能力；原始解析文档中的节点永远不参与渲染
