ES2020 引入了一项新的 API 规范，即 Selector API，用于在 DOM 中选取元素。这是一个非常有用的工具，可以帮助开发者更加方便地通过 JavaScript 操纵和选取页面上的元素，从而提高开发效率和代码可读性。
本文将介绍 ES2020 的 Selector API 规范的使用方法和具体实现。
选择器
在 Selector API 规范中，我们可以使用三种选择器：
querySelector：选择符合指定 CSS 选择器的元素，只会返回第一个匹配到的元素；querySelectorAll：选择符合指定 CSS 选择器的元素，会返回所有匹配到的元素的集合；matches：检查当前元素是否匹配指定的 CSS 选择器。
querySelector 和 querySelectorAll
这两个选择器的使用方法类似于 jQuery 中的 $ 和 $$ 函数，其中 querySelector 会返回第一个匹配到的元素，而 querySelectorAll 则会返回所有匹配到的元素的集合。
-- -------------------- ---- ------- --- ---------- -------- ------ -------- ------ -------- ------ ----- -------- ----- ---- - -------------------------------- -- -- -- - ---- --- ----- ------ - -------------------------------- -- ------- -- ----- ---------
matches
matches 方法用于检查元素是否匹配指定的 CSS 选择器。这对于在处理事件时非常有用，因为我们可以根据元素是否匹配某个选择器来触发不同的行为。
-- -------------------- ---- -------
-------
---------- -
----------------- -------
-
--------
--- ----------
-------- ------
-------- ------
-------- ------
-----
--------
----- ------ - --------------------------------
----------------- -- -
-- ----------------------------- -
------------------------------ -- ---- -- ---- --------- -
-
---
---------总结
Selector API 规范提供了三种选择器，即 querySelector、querySelectorAll 和 matches，可以方便地选取和操作 DOM 元素。在实际开发中，我们可以根据需要选择不同的选择器来实现我们想要的功能。
此外，我们还可以使用较新的 CSS 选择器，比如 :nth-child、:nth-of-type 等，通过结合 Selector API 规范，可以实现更多高级的 DOM 操作。
希望本文内容对您学习和使用 Selector API 规范有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458fc7c968c7c53b0b4716a