DOMParser - 技术栈

一、DOMParser 到底是啥？

一句话：
DOMParser 就是一个"翻译官"，它能把一段纯文本（HTML/XML/SVG 字符串）翻译成浏览器能看懂的 DOM 树，这样你就能像操作普通网页一样去增删改查节点。

二、核心 API 只有一个

js 复制代码

const parser = new DOMParser();          // 1. 造个翻译官
const doc  = parser.parseFromString(str, type); // 2. 让他翻译
// str：要翻译的字符串
// type：告诉翻译官这是哪种语言
//   • text/html     （最常用）
//   • text/xml
//   • application/xml
//   • image/svg+xml
// 返回值 doc 就是一个真正的 Document 对象

三、常用场景 + 逐行代码演示

下面 3 个场景覆盖了 90% 以上的实际开发需求。

────────────────

场景 1：把富文本字符串变成真正的 DOM，再安全地插入页面

（富文本来自后端、用户输入，用 innerHTML 容易 XSS）

html 复制代码

<textarea id="raw" rows="5">
  <h2>标题</h2>
  <p><img src="cat.png" onerror="alert('XSS')"> 这是一只猫</p>
</textarea>
<button id="btn">预览</button>
<div id="view"></div>

<script>
btn.onclick = () => {
  const htmlStr = raw.value;                // 1. 拿到字符串
  const parser = new DOMParser();           // 2. 造翻译官
  const doc = parser.parseFromString(htmlStr, 'text/html'); // 3. 翻译
  const body = doc.body;                    // 4. 取到 <body> 里的节点

  // 5. 安全过滤：把危险的 onerror 等属性干掉
  body.querySelectorAll('*').forEach(n => {
    [...n.attributes].forEach(attr => {
      if (attr.name.startsWith('on')) n.removeAttribute(attr.name);
    });
  });

  // 6. 把干净的节点放到页面
  view.innerHTML = '';              // 清空旧内容
  view.append(...body.childNodes);  // 插进去
};
</script>

逐行解释

第 3 步：parseFromString 返回完整的 document，包含 <html><body>...。
第 5 步：用 DOM 方法遍历节点、删除危险属性，比正则安全 100 倍。
第 6 步：append(...body.childNodes) 把节点"搬家"到当前页面。

────────────────

场景 2：前端抓取并解析远端 HTML 片段

（例如：抓取 GitHub Trending 列表）

js 复制代码

async function loadTrending() {
  const res   = await fetch('https://github.com/trending'); // 1. 拉 html
  const html  = await res.text();
  const doc   = new DOMParser().parseFromString(html, 'text/html'); // 2. 翻译

  // 3. 用 querySelector 直接筛选节点，像在真正的页面里一样
  const repos = [...doc.querySelectorAll('article.Box-row')].map(box => ({
    title: box.querySelector('h2 a')?.textContent.trim(),
    url:   'https://github.com' + box.querySelector('h2 a')?.getAttribute('href')
  }));

  console.table(repos); // 打印表格
}
loadTrending();

逐行解释

fetch 拿到的是纯文本 HTML；DOMParser 让它秒变可操作 DOM。
后面就是熟悉的味道：querySelector / map / trim 一套带走。

────────────────

场景 3：纯前端解析 XML 配置 / RSS 订阅

（不需要任何后端，浏览器里直接搞定）

js 复制代码

const rssString = `
<rss>
  <channel>
    <title>科技快讯</title>
    <item><title>苹果发布新芯片</title></item>
    <item><title>谷歌推出 AI 搜索</title></item>
  </channel>
</rss>`;

const doc = new DOMParser().parseFromString(rssString, 'text/xml');

// 处理解析错误
if (doc.querySelector('parsererror')) {
  console.error('XML 格式错误');
} else {
  const items = [...doc.querySelectorAll('item title')].map(n => n.textContent);
  console.log(items); // ["苹果发布新芯片", "谷歌推出 AI 搜索"]
}

逐行解释

用 text/xml 作为 type；如果字符串不是合法 XML，浏览器会插入 <parsererror> 节点。
直接 querySelectorAll 就能遍历任意层级的 XML 节点，比传统 XML API 简单很多。

────────────────

四、小结

DOMParser = 字符串 → DOM 的桥梁，浏览器自带，无需任何库。
只有一个方法 parseFromString，记住 text/html / text/xml 两个常用类型即可。
典型用途：富文本安全渲染、抓取并解析外部页面、纯前端解析 XML/RSS/SVG。