hast-util-select 是一个基于 HAST（HTML 抽象语法树）的选择器工具库，可以方便地从 HTML 文档中选取指定节点。在前端开发中，我们通常会需要在 HTML 页面中对某个元素进行操作或者获取数据，此时使用 hast-util-select 可以大大简化这个过程。
安装
在开始使用 hast-util-select 之前，需要先安装该包。可以通过 npm 进行安装：
npm install hast-util-select
使用
创建 HAST 树
首先，需要将 HTML 文档转换成 HAST 树。可以使用 hast-util-from-parse5 将 parse5 解析出来的 AST 转换为 HAST：
-- -------------------- ---- -------
----- ----- - ------------------
----- ---------- - ---------------------------------
----- ------ - ----------------------------
----- ---------- - -
------
------
--------- --- ------------
-------
------
---- -------------
-------- ----------
------
-------
-------
--
----- --- - ------------------------
----- ---- - ----------------选择器语法
hast-util-select 支持基本的 CSS 选择器语法，如下所示：
tagname：选择指定标签名的节点；.classname：选择类名为classname的节点；#id：选择 ID 为id的节点；[attr=value]：选择具有指定属性值的节点。
例如，要选择 ID 为 content 的 <div> 元素，可以使用以下选择器：
const div = select('#content', hast);多个选择器
hast-util-select 支持多个选择器的组合，用逗号分隔。例如，要选择类名为 highlight 或者 ID 为 content 的元素，可以使用以下选择器：
const elements = select('.highlight, #content', hast);筛选器
除了基本的选择器语法外，hast-util-select 还支持筛选器。筛选器是指在选择器后面添加条件，对选择器选择到的节点进行进一步过滤。
常见的筛选器有以下几种：
:first-child：选择第一个子元素；:last-child：选择最后一个子元素；:nth-child(n)：选择第n个子元素。
例如，要选择 content 下的第一个段落元素，可以使用以下选择器：
const p = select('#content > p:first-child', hast);属性选择器
除了上述基本的选择器和筛选器之外，hast-util-select 还支持属性选择器。属性选择器是指在选择器中使用方括号，对具有指定属性及属性值的节点进行选择。
例如，要选择所有带有 href 属性的链接元素，可以使用以下选择器：
const links = select('a[href]', hast);示例代码
下面是一个完整的示例代码，用于选择 HTML 页面中所有类名为 highlight 的 <div> 元素：
-- -------------------- ---- -------
----- ----- - ------------------
----- ---------- - ---------------------------------
----- ------ - ----------------------------
----- ---------- - -
------
------
--------- --- ------------
-------
------
---- -------------
---- ---------------------- -- - ----------------
-------- ----------
------
---- ---------------------- -- ------- ----------------
-------
-------
--
----- --- - ------------------------
----- ---- - ----------------
----- ---- - -------------------- ------
------------------输出结果为：
[
{
type: 'element',
tagName: 'div',
properties: { className: [Array] },
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/41755) ，转载请注明来源
[https://www.javascriptcn.com/post/41755](https://www.javascriptcn.com/post/41755)