学习了解JS的classlist

在JavaScript中，classList 是一个在DOM元素上用于操作元素类名的属性。它提供了一个比传统 className 属性更强大且更易于使用的方式来添加、移除和切换类名。

classList 不是一个函数，而是一个对象，它包含了几个方法，允许你以列表的形式处理类名。以下是 classList 的一些常用方法：
1. add()

用于向元素添加一个或多个类名。如果指定的类名已经存在，则不会添加。

javascript

element.classList.add('class1', 'class2');

2. remove()

用于从元素中移除一个或多个类名。如果指定的类名不存在，则不会有任何影响。

javascript

element.classList.remove('class1', 'class2');

3. contains()

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

javascript

if (element.classList.contains('class1')) {  
  // 执行操作  

}

4. toggle()

切换元素的类名。如果元素已包含指定的类名，则移除它；如果元素不包含指定的类名，则添加它。

javascript

element.classList.toggle('class1');

toggle() 方法还可以接受一个可选的第二个参数，它是一个布尔值，表示是否应该添加类名（如果为 true）或移除类名（如果为 false）。
5. replace() (非标准，但一些浏览器支持)

将元素的某个类名替换为另一个类名。如果原始类名不存在，则添加新的类名。

javascript

element.classList.replace('class1', 'class2');

请注意，replace() 方法并不是所有浏览器都支持的标准方法。在使用之前，请检查你的目标浏览器是否支持它。
6. item()

通过索引获取类名列表中的类名。注意，类名的顺序可能与添加它们的顺序不同，因为浏览器可能会按照字母顺序对类名进行排序。

javascript

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

7. length

获取元素类名列表中的类名数量。

javascript

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

8. toString()

将类名列表转换为字符串。这通常与直接使用 className 属性相似，但 classList.toString() 只会返回类名，而不会包含任何空格或其他分隔符。

javascript

var classString = element.classList.toString(); // 获取类名字符串