前言
在前端开发中，我们常常需要对 DOM 元素进行操作，例如查找元素、添加/删除/修改元素样式、添加/删除/修改元素属性等等。而一个常见的问题就是如何查找符合某些条件的 DOM 元素。在 JavaScript 中，我们可以使用许多不同的方式来实现这一目的，如原生的 querySelector、querySelectorAll，以及一些工具库如 jQuery，但是这些方法并不总是简洁易懂，且在某些情况下还可能会存在兼容性问题，因此一个轻量而实用的 npm 包 dom-matches 应运而生。
简介
dom-matches 是一个轻量且依赖-less 的 npm 包，它提供了一种快速而简单的方法来查找符合某些条件的 DOM 元素。其主要功能是将实例化的元素与给定的选择器进行匹配，并返回一个指示是否匹配成功的布尔值。
安装
你可以在 npm 仓库中找到 dom-matches 并安装它：
npm install dom-matches
使用
基本使用
下面是一个简单的例子：
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- ------- - ---------------------------------- -- ----------------- ------------ - -- ---- - ---- - -- ---- -
上面的例子实例化了一个元素并将其传入 matches 函数中，函数将该元素与给定的选择器字符串 .myClass 进行匹配。如果匹配成功，则返回 true，否则返回 false。
高级使用
可选参数
dom-matches 函数支持第三个可选参数 element，该参数代表要匹配的元素，如果省略该参数，则默认为 window.document。
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- ------ - -------------------------------------- ----- ----- - ------------------------------------- -- --------------- -------------- -------- - -- ---- - ---- - -- ---- -
上面的例子实例化了两个元素，其中一个是另外一个的父元素，我们可以将父元素 parent 传给函数，并在匹配时设置其为可选参数 element，这样就可以只在父元素的范围内进行匹配。
基于函数的匹配
我们还可以通过传入一个函数作为第二个参数的方式，来对更复杂的选择器进行匹配。例如：
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- ------- - ---------------------------------- -- ----------------- ---- -- ---------------------------------- - -- ---- - ---- - -- ---- -
上面的例子中，我们定义了一个函数 (el) => el.classList.contains('myClass')，该函数接受一个参数 el，表示当前正在测试的元素，并返回一个布尔值，表示是否匹配成功。我们将该函数作为第二个参数传给 matches 函数进行测试。
Polyfill
如果你需要在旧版浏览器中使用 dom-matches，你需要使用一个 polyfill。你可以引入一个叫做 dom4 的 polyfill，例如：
import 'dom4' import matches from 'dom-matches'
总结
dom-matches 是一个非常有用的 npm 包，它提供了一种快速而简单的方法来查找符合某些条件的 DOM 元素。无论你是在处理原生的 JavaScript 应用程序，还是使用诸如 React、Vue.js 等框架，都可以使用 dom-matches 来简化你的代码并提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/dom-matches