如何使用parse5解析HTML？其parse返回的document为何无法调用querySelector？

问题原因 #

parse5的parse方法返回的不是浏览器标准的Document DOM对象，而是parse5自定义的抽象语法树（AST）节点结构，本身没有实现querySelector这类DOM API方法，所以直接调用会报错。

解决方法 #

这里提供两种常用的落地方案：

方案1：搭配parse5生态工具实现选择器查询 #

使用parse5-htmlparser2-tree-adapter适配器将解析结果转换为htmlparser2格式的节点树，再配合css-select库执行CSS选择器查询。
先安装依赖：

npm install parse5-htmlparser2-tree-adapter css-select

修改后的代码如下：

import fetch from 'node-fetch';
import { parse } from 'parse5';
import * as htmlparser2Adapter from 'parse5-htmlparser2-tree-adapter';
import * as cssSelect from 'css-select';

(async () => {
    const options = {
        redirect: "manual"
    };

    const response = await fetch('https://google.com', options);
    // 解析时指定适配器，生成htmlparser2兼容的节点树
    const dom = parse(await response.text(), { treeAdapter: htmlparser2Adapter });
    // 使用cssSelect执行查询
    const titleNode = cssSelect.selectOne('title', dom);
    // 取出标题文本
    console.log(htmlparser2Adapter.getTextContent(titleNode));
})();

方案2：直接使用jsdom获得完整DOM能力 #

如果需要完整使用浏览器端的DOM API（包括querySelector、事件处理等），可以直接用jsdom替代纯parse5做解析，jsdom内部已经集成了parse5作为解析器，天然支持所有标准DOM方法：
先安装依赖：

npm install jsdom node-fetch

代码示例：

import fetch from 'node-fetch';
import { JSDOM } from 'jsdom';

(async () => {
    const options = {
        redirect: "manual"
    };

    const response = await fetch('https://google.com', options);
    const dom = new JSDOM(await response.text());
    // 直接使用标准querySelector方法
    console.log(dom.window.document.querySelector('title').textContent);
})();

内容的提问来源于stack exchange，提问作者david stephen