什么是 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 支持所有現代瀏覽器。