什么是npm包query-selectors？
npm（Node Package Manager）是Nodejs自带的包管理工具，通过它可以搜索、安装、升级和删除Nodejs包（类库），其中就包括 query-selectors 这个包。
query-selectors是一个轻量级选择器引擎，可以用来选取DOM树中元素的内容，类似于jQuery的选择器。而且不同于jQuery，它的包体积只有一部分，所以在需要通过选择器筛选DOM元素的web应用中，它是一个非常好的选择。
query-selectors的安装
在Nodejs项目中，首先需要通过npm安装query-selectors，在终端中输入以下命令：
npm install query-selectors
上述命令将query-selectors包下载到了本地项目的node_modules文件夹下。
使用方法
导入query-selectors
使用query-selectors之前，需要先导入它：
const qs = require('query-selectors');选择器的使用
基本选择器
query-selectors 支持大部分 CSS 选择器，包括：
- 标签选择器：
div、p、ul等 - ID选择器：
#myId - 类选择器：
.myClass - 属性选择器：
[href='example.com'] - 通配符：
* - 组合选择器：
div .myClass、p > a等
具体使用方法请看下面代码：
-- -------------------- ---- ------- -- ---------- --- -- ----- ---- - ---------- -- -- ------ -- - ---- --- ----- ---- - ------------ -- --------- ------- --- ----- ------- - --------------- -- -------- ---- --- ----------- --- ----- ------- - --------------------------- -- ---------- ----- -------- - -------- -- ---------- ----- -------- ------- --- ----- --------- - ------- -----------
伪类选择器
query-selectors 也支持一部分 CSS 伪类选择器，包括:
- :first-child
- :last-child
- :nth-child(n)
- :nth-last-child(n)
具体使用方法请看下面代码：
-- -------------------- ---- ------- -- ----- ----- -- ----- -------- - ---------------------- -- ------ --- -- ----- ----- - ------------------- -- ----- --- -- ----- ------ - --------------------- -- ------- ----- -- ----- ------------- - ----------------------------
多元素选择器
同时选择多个元素的方式有两种，分别是用逗号隔开选择器，或者在子选择器中用逗号隔开：
// 选择 <div> 和 <p> 元素
const divsAndPs = qs('div, p');
// 选择一系列 <button> 元素的后代中的 <span> 元素
const buttonsAndSpans = qs('button span')完整API
query-selectors拥有丰富的API，可以用来选取DOM元素以及获取元素属性和内容，具体如下：
-- -------------------- ---- -------
-- ---- ----- --
----- ---- - ----------
-- -------------
----- ----- - --------
-- -- -- - ---- -----------
----- -------- - -----------------
-- ----- --- -----
----- ---------- - -------------------------
-- ----- ----- - --- ---
----- ------------ - --------------------------- -------
-- ---- ------- -----------
----------------------- ------------
-- -- -- - ---- -------------
-----------
------
------------------- ----------
------------ ------
--
------------- ---------总结
通过以上介绍，我们可以看到query-selectors具有如下的优点：
- API丰富，功能强大
- 比jQuery轻量，适于一些规模较小的项目
- 支持大部分 CSS 选择器
- 容易上手
总之，如果需要通过选择器筛选DOM元素，query-selectors绝对是一个值得尝试的npm包。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f881e8991b448e0c60