什么是 Custom Elements？
Custom Elements 是 Web Components 中的一部分，它可以让开发者定义自己的 HTML 元素并在页面上使用。Custom Elements 是由浏览器原生支持的，因此无需引入任何外部库或框架即可使用。
为什么要使用 classList？
在 Web 开发中，我们经常需要在 DOM 元素上添加或删除 CSS 类，以改变元素的样式或状态。以往我们通常使用 element.className 来操作类，但是这种方式有一些问题：
- 如果一个元素同时拥有多个类，则使用
element.className会覆盖掉原有的所有类，而只会保留最后一个类。 - 如果要添加或删除类，我们需要手动操作字符串并处理其中的空格字符，十分繁琐。
因此，W3C 提供了 classList 属性，它为我们提供了方便的 API 来添加、删除、切换和检测类。
如何操作 classList？
添加类
使用 add 方法可以向元素的 classList 中添加一个或多个类，示例如下：
-- ------ ----- ------- - ------------------------------ -- ----- -------------------------------- -- ----- ------------------------------- --------- ----------
删除类
使用 remove 方法可以从元素的 classList 中删除一个或多个类，示例如下：
-- ------ ----- ------- - ------------------------------ -- ----- ----------------------------------- -- ----- ---------------------------------- --------- ----------
切换类
使用 toggle 方法可以在元素的 classList 中切换一个或多个类的存在状态。如果类不存在，则添加它；如果类已经存在，则删除它。示例如下：
-- ------ ----- ------- - ------------------------------ -- ----- ----------------------------------- -- ----- ---------------------------------- ------ -- -- ------ ---------------------------------- ------- -- -- ------
检测类
使用 contains 方法可以检测元素的 classList 中是否包含指定的类，示例如下：
-- ------ ----- ------- - ------------------------------ -- ----- -- -------------------------------------- - -- --- - -- ----- -- ------------------------------------- -- ------------------------------------- - -- --- -
如何在 Custom Elements 中使用 classList？
在自定义元素的原型链上可以直接操作 classList，示例如下：
----- --------- ------- ----------- -
------------- -
--------
---------------------------------
-
-
----------------------------------- -----------总结
使用 classList 可以方便地操作 DOM 元素上的类，避免了手动处理字符串的繁琐步骤。在自定义元素中，可以直接使用 classList 操作元素的类。
完整示例代码可参考：Custom Elements 示例代码。
希望本文对您在 Web 开发中使用 classList 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64857df248841e989444e45f