在 web 前端开发中，我们经常需要操作 HTML 元素的样式。在过去，我们可能会使用 element.className 属性来操作元素的类名，但是这种方式会覆盖原有的类名，导致不方便管理。为了解决这个问题，HTML DOM 提供了 classList 属性，它是一个只读属性，返回一个元素的类名列表，可以方便地添加、删除和切换类名。
添加类名
要添加一个类名到元素的 classList 中，可以使用 add() 方法。例如，假设我们有一个按钮元素：
------- ------------------- -----------
我们可以使用 JavaScript 来添加一个名为 active 的类名：
----- ------ - ------------------------------------ -------------------------------
删除类名
要从元素的 classList 中删除一个类名，可以使用 remove() 方法。例如，如果我们想删除之前添加的 active 类名：
----------------------------------
切换类名
有时候我们需要在不同状态之间切换类名，可以使用 toggle() 方法。这个方法会在元素的 classList 中添加或删除指定的类名。如果元素已经有这个类名，它会被删除；如果元素没有这个类名，它会被添加。例如，我们可以创建一个简单的按钮点击切换样式的效果：
------- ------------- -------------------- -----------
----- ------ - ------------------------------------ -------------------------------- ---------- - ---------------------------------- ---
检查类名
要检查一个元素是否包含某个类名，可以使用 contains() 方法。这个方法会返回一个布尔值，表示元素的 classList 中是否包含指定的类名。例如，我们可以检查按钮是否包含 active 类名：
-- ------------------------------------- - ------------------- -- --------- - ---- - ------------------- -- --- --------- -
替换类名
有时候我们需要替换元素的类名，可以使用 replace() 方法。这个方法会将元素的一个类名替换为另一个类名。例如，我们可以将按钮的 active 类名替换为 inactive：
---------------------------------- ------------
总结
使用 classList 属性可以方便地操作元素的类名，而不会覆盖原有的类名。通过 add()、remove()、toggle()、contains() 和 replace() 方法，我们可以轻松地添加、删除、切换、检查和替换类名，从而实现更灵活的样式控制。希望本文对你有所帮助！