npm 包 @nathanfaucett/query_selector 使用教程

在前端开发过程中，操作 DOM 元素是非常常见的需求。我们通常使用 document.querySelector 或 document.querySelectorAll 来选择元素，但是这些 API 在某些情况下并不够灵活。

于是乎，@nathanfaucett 开发了一个 npm 包 @nathanfaucett/query_selector，可以让我们更快捷地选择 DOM 元素。下面就来详细介绍一下。

安装

使用 npm 安装：

npm install @nathanfaucett/query_selector --save

使用

基本用法

const { querySelector, querySelectorAll } = require("@nathanfaucett/query_selector");

const element = querySelector("#id");
const elements = querySelectorAll(".class");

选择器语法

@nathanfaucett/query_selector 支持大部分 CSS 选择器语法，包括：

• #id
• .class
• tag
• tag.class
• tag#id
• tag:nth-child
• tag:nth-of-type
• tag[attr=value]
• tag[attr~=value]
• tag[attr|=value]
• tag[attr^=value]
• tag[attr$=value]
• tag[attr*=value]
• tag:first-child
• tag:first-of-type
• tag:last-child
• tag:last-of-type
• tag:only-child
• tag:only-of-type

上下文选择器

@nathanfaucett/query_selector 还支持通过第二个参数传入上下文元素，来限定选择器查找的范围。

const { querySelector } = require("@nathanfaucett/query_selector");

const parent = document.querySelector(".parent");
const element = querySelector(".child", parent);

其他 API

• matches(selector, element): 判断元素是否匹配选择器。
• closest(selector, element): 返回离指定元素最近的符合选择器的父元素。

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ---------- - ----------------------------- ------------
  -------
  ------
    ---- ---------------
      ---- ------------ -------- -------
      ---- ------------ -------- -------
      ---- ------------ -------- -------
    ------
    ------- ----------------------------------------------------------------------------
    --------
      ----- - -------------- ----------------- -------- ------- - - --------------

      ----- ------- - --------------------
      --------------------------------- -- ------ --

      ----- -------- - ---------------------------
      ----------------------------- -- -

      ----- ------ - ----------------------------------
      ----- ----- - ----------------------- --------
      ------------------------------- -- ------ --

      ----- --------- - ------------------- ---------
      ----------------------- -- -----

      ----- -------------- - ------------------ ---------
      --------------------------------------------------------- -- ----
    ---------
  -------
-------

总结

@nathanfaucett/query_selector 能够更加灵活方便地操作 DOM 元素，同时还支持大部分 CSS 选择器语法和上下文选择器，可以大大提高开发效率。

使用该包需要注意的是，它并没有对 querySelector 和 querySelectorAll 进行替换，如果需要请自行实现，或者使用 @nathanfaucett/query_selector 提供的查询 API。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e2449aa