在前端开发中，`classList` 是一个非常实用的 API，它能让我们轻松地操作 HTML 元素的类名（class）。相比于直接操作 `className`，`classList` 更加直观和灵活，支持多种方法来添加、删除或切换类名。

首先，让我们了解一下它的基础用法：

✅ `element.classList.add('class-name')`

可以为元素添加指定的类名，如果有多个类名，可以用逗号分隔。

💡 示例：`myElement.classList.add('active', 'highlight');`

其次，如果你想移除某个类名，可以使用：

❌ `element.classList.remove('class-name')`

这会从元素中移除指定的类名。

💡 示例：`myElement.classList.remove('highlight');`

还有更智能的操作！比如：

🔄 `element.classList.toggle('class-name')`

如果类名存在则移除，不存在则添加。非常适合条件判断场景。

💡 示例：`myElement.classList.toggle('active', condition);`

最后，别忘了检查类名是否存在：

🔍 `element.classList.contains('class-name')`

这个方法返回布尔值，帮助我们判断类名是否已存在。

💡 示例：`if (myElement.classList.contains('active')) { ... }`

掌握这些技巧后，你会发现页面交互变得更加简单流畅！✨