在前端开发中，我们经常需要对 DOM 元素进行操作。而很多时候，我们会使用 jQuery 这样的工具库来方便地操作 DOM 元素。然而，在一些新的标准中，也有一些新的 API 可以帮助我们处理 DOM 元素，其中就包括 Custom Elements 的 classList 用法。本文将介绍 classList 的详细用法，同时也会进行一些实践操作，帮助大家更好地掌握这个 API。
什么是 classList？
classList 是一个只读的 DOMTokenList 对象，它包含了元素的类名。classList 允许我们通过 add、remove、toggle 和 contains 方法来修改元素的类名，进而影响样式。这个 API 支持多个类名操作，能让我们更方便地操作 DOM 元素。
classList 主要方法
add
add 方法用于向元素添加一个类名。如果类名已经存在，那么该方法什么也不会做。
<div id="example"></div>
const example = document.querySelector('#example');
example.classList.add('hello');上述代码会在 example 元素中添加一个类名为 hello。
remove
remove 方法用于从元素中移除一个类名。如果类名不存在，该方法什么也不会做。
example.classList.remove('hello');上述代码会将 example 元素中的类名 hello 移除。
toggle
toggle 方法用于切换元素的类名。如果元素中存在该类名，则移除该类名；如果不存在，则添加该类名。
example.classList.toggle('hello');如果 example 元素中存在 hello 类名，则该代码会将 hello 类名从元素中移除。如果不存在，则会添加 hello 类名。
contains
contains 方法用于检查元素是否包含指定类名。返回值为布尔类型。
if (example.classList.contains('hello')) {
console.log('包含 hello 类名');
}实践操作
现在我们已经了解了 classList 的基本方法，请看以下实践操作。
实践一：切换类名
在很多场景下，我们需要根据一些条件来切换元素的类名，例如实现一个带有查看更多/隐藏的按钮。下面是一个实现例子：
<div id="content">...</div> <button id="button">查看更多</button>
-- -------------------- ---- -------
----- ------- - -----------------------------------
----- ------ - ----------------------------------
-------------------------------- -- -- -
-- ------- ------
-----------------------------------
-- ------
------------------ - ------------------------------------
- ------
- -----
---上述代码会在点击按钮时，切换 content 元素的类名，从而实现显示/隐藏的效果，并同时切换按钮的文本。
实践二：动态添加类名
有时候，我们可能需要在元素上动态添加一些类名，例如实现一个菜单导航的高亮效果。下面是一个实现例子：
<ul> <li data-id="home">首页</li> <li data-id="about">关于我们</li> <li data-id="contact">联系我们</li> </ul>
-- -------------------- ---- -------
----- --- - --------------------------------
--- ------ -- -- ---- -
---------------------------- -- -- -
--- ------ -- -- ---- -
------------------------------
-
---------------------------
---
-上述代码会在点击 li 元素时，动态地添加 active 类名，并移除其他 li 元素的 active 类名，实现菜单导航的高亮效果。
总结
在本文中，我们介绍了 classList 的基本用法，并进行了实践操作，希望能帮助大家更好地掌握这个 API。虽然 jQuery 可以帮助我们快速地操作 DOM 元素，但是我们也需要关注一些新的标准，去学习使用其提供的 API，以便更好地开发出高质量的前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522766b95b1f8cacd9f1c63