CSSwhat 是什么？
CSSwhat 是一个轻量级的 JavaScript 库，它可以将 CSS 选择器字符串转换为对应的 JavaScript 对象，以便于在代码中进行解析和使用。
安装 CSSwhat
你可以通过 npm 来安装 CSSwhat，只需要在命令行中输入下面的命令即可：
npm install css-what
使用 CSSwhat
CSSwhat 最常见的用途是在解析 HTML 和 CSS 代码中的选择器，以便于针对特定的元素进行 DOM 操作。下面我们来看一下如何使用 CSSwhat。
首先，我们需要引入 CSSwhat 库：
const cssWhat = require('css-what');
接着，我们可以使用 cssWhat 函数来解析 CSS 选择器字符串，它接收一个字符串参数和一些配置选项，然后返回一个 JavaScript 对象数组。下面是一个例子：
const selector = 'div > .foo:nth-child(2)'; const parsed = cssWhat(selector); console.log(parsed);
输出结果如下所示：
[ [ { type: 'element', name: 'div' }, { type: 'descendant' }, { type: 'class', name: 'foo' }, { type: 'pseudo', name: 'nth-child', data: '2' } ] ]
我们可以看到，CSSwhat 将选择器字符串解析成了一个嵌套的数组，其中每个元素代表一个选择器。每个选择器都是一个对象，对象的属性描述了选择器的类型、名称和其他一些信息。
接下来，我们可以使用这些对象来进行 DOM 操作。比如，我们可以使用 querySelectorAll 方法来获取匹配某个选择器的所有元素：
const elements = document.querySelectorAll(selector); console.log(elements);
上面的示例相当于下面的代码：
const elements = document.querySelectorAll('div > .foo:nth-child(2)'); console.log(elements);
高级用法
除了上面介绍的基本用法之外，CSSwhat 还支持一些高级用法，例如自定义处理函数和选择器扩展。
自定义处理函数
在解析选择器的过程中，CSSwhat 会对每个选择器对象调用一个处理函数，用来执行一些额外的操作。你可以通过给 cssWhat 函数传递一个选项来自定义处理函数，例如：
-- -------------------- ---- ------- ----- -------- - ---- - ------------------- ----- ------ - ----------------- - -------- - -- ------- -------- ---------- -- - ------ - ----- ---------------------------- ------ -------------- - - - --- --------------------展开代码
上面的代码中，我们定义了一个自定义的处理函数，它会将解析出来的选择器名称转换为大写，并且只保留了类名信息。这样，我们就可以在解析后的对象中获取更加具体的信息了。
输出结果如下所示：
[ [ { name: 'DIV', class: [] }, { type: 'descendant' }, { name: 'FOO', class: [ 'foo' ], nth: 2 } ] ]
选择器扩展
CSSwhat 也支持选择器扩展，允许你使用自定义的选择器类型来描述更加复杂的选择器。例如，我们可以定义一个 has 类型的选择器，来查找具有指定子元素的元素。具体定义如下：
-- -------------------- ---- ------- ----- --------- - ---------------------- ----- ------- - -------------------- --------------------- - ------ --------- -- - ----- ------- - ------------------- ------ ------ -------------- - -- -- ----------------------------- - ------ ---------------------- ----- -- -- - ------ - --------- -- -- -- ----- ------ ------- ------ ---- -- - --------------------------- - ---展开代码
上面的代码定义了一个 has 选择器类型，它能够查找具有指定子元素的元素。我们通过在 pseudos 对象上定义 has 方法来实现这一功能。在方法的执行过程中，我们使用了 cssSelect 函数来查找所有匹配的元素，然后返回是否有匹配的元素。
接着，我们使用 registerPseudo 方法来在 CSSwhat 中注册 has 类型的选择器。registerPseudo 方法接收一个对象参数，参数中包含了 has 类型选择器的各种属性和方法。其中 parse 方法用来解析选择器字符串，open 方法用来在解析过程中创建初始对象，name 属性表示选择器的名称，action 方法用来在解析过程中添加子元素。
有了这个新的选择器类型之后，我们就可以在解析选择器字符串的时候，使用这个新的类型来描述选择器了。例如：
const selector = 'div:has(> .foo:nth-child(2))'; const parsed = cssWhat(selector); console.log(parsed);
输出结果如下所示：
[ [ { type: 'element', name: 'div' }, { type: 'pseudo', name: 'has', data: [ { type: 'descendant' }, { type: 'class', name: 'foo' }, { type: 'pseudo', name: 'nth-child', data: '2' } ] } ] ]
结论
CSSwhat 是一个功能强大的 JavaScript 库，它可以让我们非常方便地解析 CSS 选择器字符串，从而实现更加精细的 DOM 操作。本文介绍了 CSSwhat 的基本用法、高级用法和选择器扩展等内容，相信读者已经可以掌握它的使用了。如果您需要进一步了解 CSSwhat 的相关知识，建议您查看官方文档和代码库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75192
