在前端开发中，有时候需要在特定情况下对某个元素添加或删除某个 class。此时，需要使用 JavaScript 来实现操作，但是有时候想要判断某个元素是否含有某个 class，这就需要使用一些辅助工具。has-class-selector 就是一个实现这一功能的 npm 包，本文将介绍如何使用这个 npm 包。
安装
安装 has-class-selector，可以在终端输入以下命令：
npm install has-class-selector
用法
在你的项目中，你可以使用以下语法来在 JavaScript 中使用 has-class-selector：
import hasClassSelector from 'has-class-selector';
const hasClass = hasClassSelector('.my-element', 'my-class');这里，第一个参数是元素选择器，第二个参数是需要判断的 class 名称。上面的代码返回一个布尔值，表示元素是否有这个 class。
当然，你还可以通过以下方式在 jQuery 中使用：
$('.my-element').hasClass('my-class');深入
在了解了 has-class-selector 的用法之后，我们来深入探讨一下这个 npm 包的实现原理。
-- -------------------- ---- -------
------ ------- ---------- ---------- -- -
-- ------------------------------------ -
------ ---------------------------------------------------------------
-
---- -
----- ---- - ---------------------------------
------ --- ----------------- - --------- - ---------------------------------
-
--上面是 has-class-selector 的核心代码。在这里，它首先判断了当前浏览器是否支持 classList 属性。class 属性可以通过 .className 属性获取，而 classList 属性是一个 DOMTokenList 对象，包含了元素的所有 class 名称，可以使用 add()、remove()、toggle() 和 contains() 方法对元素的 class 属性进行操作。如果当前浏览器支持 classList，那么 has-class-selector 直接使用 contains() 方法来判断元素是否含有某个 class。
如果浏览器不支持 classList，那么 has-class-selector 使用正则表达式来进行判断。在这种情况下，我们首先需要获取元素的 class 名称，使用 querySelector() 方法获取元素对象，同时使用 className 属性获取 class 名称。然后，我们使用正则表达式来判断元素是否含有某个 class。
示例代码
下面是一个简单的示例代码，演示了如何使用 has-class-selector。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ----------
-------
------
---- -------------------
--------------
------
------- --------------------------------------------------------------------------------
--------
----- -------- - ------------------------------- ------------
---------------------- -- -----
----------------------------------------------------------------
----- --------- - ------------------------------- ------------
----------------------- -- ----
---------
-------
-------这个示例代码中，我们首先使用 hasClassSelector() 方法来判断元素是否含有 my-class 这个 class，结果为 false。然后，我们使用 classList.add() 方法添加了这个 class，然后再次使用 hasClassSelector() 方法来判断，结果为 true。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69080