什么是 JavaScript ClassList？

JavaScript ClassList 是一个表示元素 class 属性的 DOM 接口。它允许开发者轻松操作元素的 class 属性，包括添加、删除和切换 class。

ClassList 的属性和方法

value：获取或设置元素的 class 属性。

length：获取 ClassList 中 class 的数量。

add(class)：添加给定的 class 到元素中。

remove(class)：从元素中删除给定的 class。

toggle(class)：如果元素中存在给定的 class，则将其删除；如果不存在，则将其添加。

contains(class)：检查元素中是否包含给定的 class。

item(index)：获取 ClassList 中指定索引处的 class。

示例

以下代码演示了如何使用 ClassList 来操作元素的 class 属性：

const element = document.getElementById('my-element');

// 添加一个 class
element.classList.add('active');

// 删除一个 class
element.classList.remove('error');

// 切换一个 class
element.classList.toggle('visible');

// 检查一个 class 是否存在
const hasActiveClass = element.classList.contains('active');

优势

使用 ClassList 有以下优势：

易于修改：它提供了一个便捷的方法来修改元素的 class 属性，而无需直接操作 DOM。

提高性能：ClassList 使用了 DOM 原生方法，因此性能很好。

兼容性：ClassList 支持所有现代浏览器。