JavaScript操作DOM元素的classList

在JavaScript中，classList 是一个DOM元素属性，它提供了一组方法来添加、移除和切换元素的类名。classList 属性返回一个 DOMTokenList 集合，表示元素的类名。

这个集合提供了几个非常有用的方法，我们可以方便地对元素的类名进行操作，包括添加、移除、切换类名等。

1，添加类名

add(class1, class2, ...)：向元素添加一个或多个类名。如果指定的类名已存在，则不会添加。

element.classList.add('myClass'); // 添加单个类名
element.classList.add('myClass1', 'myClass2'); // 添加多个类名

2，移除类名

remove()：从元素中移除一个或多个类名。如果指定的类名不存在，则不会移除。

element.classList.remove('myClass'); // 移除单个类名
element.classList.remove('myClass1', 'myClass2'); // 移除多个类名

3，切换类名

toggle(class, force)：切换一个类名的存在和消除。如果类名存在则移除，如果不存在则添加。force参数为true时强制添加类名，为false时强制移除类名。

element.classList.toggle('myClass'); // 切换单个类名
// 如果元素原本有 'myClass'，则移除它；如果没有，则添加它

element.classList.toggle('myClass', true); // 强制切换单个类名
element.classList.toggle('myClass', false); // 强制切换单个类名

4，替换类名

replace(oldClass, newClass)：替换元素的一个类名为另一个类名。

element.classList.replace('oldClass', 'newClass'); // 替换类名

5，检查是否包含类名

contains()：检查元素是否包含指定的类名。如果包含，则返回 true；否则返回 false。

const hasClass = element.classList.contains('myClass'); // 检查是否包含类名

// 或者
if (element.classList.contains('active')) {
  // do something
}

6，通过索引获取类名

item()：通过索引获取类名。返回指定索引位置的类名，如果索引超出范围，则返回 null。

const className = element.classList.item(0); // 获取第一个类名

7，类名数量

length：返回元素的类名数量。

const classCount = element.classList.length; // 获取类名数量

8，遍历类名列表

forEach()（ES2018引入）：遍历类名列表，并为每个类名执行一个函数。

element.classList.forEach((className, index, list) => {
  console.log(className); // 遍历并打印每个类名
});

values() / keys() / entries()（ES2018引入）：返回新的迭代器对象，允许你使用 for...of 循环遍历类名。

for (const className of element.classList.values()) {
  console.log(className); // 使用 for...of 循环打印每个类名
}

这些方法使得在JavaScript中操作元素的类名变得非常简单和直观。你可以根据需要使用它们来动态地修改元素的样式或行为。