在前端开发中，解析 HTML 的常用 JavaScript 库和工具包括以下几种：
1. 浏览器原生 API
DOMParser
浏览器内置 API，可将 HTML 字符串解析为 DOM 树：const parser = new DOMParser(); const doc = parser.parseFromString('<div>Hello</div>', 'text/html'); console.log(doc.body.firstChild); // 获取解析后的 DOM 节点优点：无需额外依赖，性能高。
innerHTML/createElement
直接操作 DOM：const div = document.createElement('div'); div.innerHTML = '<span>Text</span>';
2. 第三方库
（1）Cheerio（Node.js & Browser）
类似 jQuery 的轻量级 HTML 解析器，适用于服务端（如爬虫）或浏览器：
const cheerio = require('cheerio');
const $ = cheerio.load('<div class="box">Content</div>');
console.log($('.box').text()); // "Content"
特点：无虚拟 DOM，仅解析静态 HTML，适合快速提取数据。
（2）JSDOM（Node.js）
在 Node.js 中模拟浏览器 DOM：
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<html><body><p>Hello</p></body></html>');
console.log(dom.window.document.querySelector('p').textContent); // "Hello"
特点：支持完整的 DOM API（如 querySelector），但较重。
（3）Parse5（Node.js）
高效的 HTML/XML 解析器，被用于多个工具链（如 Angular、Vue SSR）：
const parse5 = require('parse5');
const document = parse5.parse('<div>Test</div>');
console.log(document.childNodes[0].tagName); // "div"
特点：速度快，适合服务端渲染（SSR）。
（4）HtmlParser2（Node.js & Browser）
流式低层解析器，适合逐块处理大型 HTML：
const htmlparser2 = require('htmlparser2');
const parser = new htmlparser2.Parser({
onopentag(name, attribs) {
console.log(`Tag: ${name}`);
}
});
parser.write('<div id="foo">Content</div>');
parser.end();
3. WASM/高性能方案
- Linkedom
轻量级 DOM 实现，支持部分浏览器 API：
import { parseHTML } from 'linkedom';
const { document } = parseHTML('<h1>Title</h1>');
console.log(document.querySelector('h1').textContent);
选择建议
| 场景 | 推荐工具 |
|---|---|
| 浏览器环境 | 原生 DOMParser / innerHTML |
| Node.js爬虫 | Cheerio / JSDOM |
| SSR/工具链 | Parse5 |
| 流式处理 | HtmlParser2 |
如果需要更具体的用法或示例代码，可以告诉我你的使用场景！
内容由零声教学AI助手提供，问题来源于学员提问
