在前端开发中，我们经常需要对 HTML 元素的 class 属性进行操作，比如添加、删除、替换等。而 class-list 就是一款非常方便的 npm 包，可以帮助我们更加高效地操作元素 class。
安装和引入
使用 npm 进行安装：
--- ------- ---------- ------
然后在你的代码中引入：
------ --------- ---- -------------
基本用法
ClassList 可以接收一个 DOM 节点作为参数，然后返回一个类似数组的对象，包含了该节点的所有 class。例如，对于下面这个 HTML 元素：
---- ---------- ---------- -----------
我们可以这样获取它的 class 列表：
----- ----- - --------------------------------- ----- --------- - --- ----------------- ----------------------- -- ---------- ------
当然，ClassList 也提供了许多方法来操作元素的 class。下面介绍几个常用的方法。
add()
add() 方法可以用来添加一个或多个 class。如果指定的 class 已存在，则不会重复添加。
--------------------- ----------------------- -- ---------- ------ ------ -------------------- ------- ----------------------- -- ---------- ------ ------ ------
remove()
remove() 方法可以用来删除一个或多个 class。如果指定的 class 不存在，则不会有任何影响。
------------------------ ----------------------- -- ---------- ------ ----------------------- ------- ----------------------- -- ----------
toggle()
toggle() 方法可以用来切换一个 class 的状态，即如果该 class 存在，则删除它；否则添加它。
------------------------ ----------------------- -- ---------- ------------------------ ----------------------- -- ---------- ------
contains()
contains() 方法可以用来判断一个元素是否包含某个 class。
--------------------------------------- -- ------- --------------------------------------- -- --------
高级用法
除了基本用法之外，ClassList 还提供了一些高级功能和扩展。下面介绍几个比较常用的扩展。
forEach()
forEach() 方法可以用来遍历所有的 class，并对每个 class 执行一些操作。
----------------------------- -- -
-----------------------
---replace()
replace() 方法可以用来替换一个 class，即先删除指定的 class，再添加另一个 class。
------------------------ -------- ----------------------- -- ---------- -------
value 属性
ClassList 对象还有一个 value 属性，可以获取或设置元素的 class 字符串。
----------------------------- -- ------- ----- --------------- - ------ ----------------------------- -- --------
总结
ClassList 是一个非常方便的 npm 包，可以帮助我们更加高效地操作元素 class。通过本文的介绍，你已经学会了 ClassList 的基本用法和一些高级扩展，相信在实际的开发中会对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/41973