DOM的classList属性

定义和用法

classList 属性返回元素的类名，作为 DOMTokenList 对象，该属性可用户元素类的添加、移除、切换等, classList属性为只读，但可以使用add()和remove()方法修改。

属性与方法

1、 length 返回类列表中类的数量
2、 add(class1, class2, ...) 在元素中添加一个或多个类
3、 remove(class1, class2, ...) 在元素中删除一个或多个类
4、 contains(class) 返回true或false，判断是否存在某个类
5、 item(index) 返回元素中索引值对应的类名。索引值从 0 开始，如果索引值在区间范围外则返回 null
6、 toggle(ckass, true|false) 在元素中切换类型，第一个参数为要在元素中移除的类名，并返回 false，如果该类名不存在则会在元素中添加类名，并返回 true，第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在
7、 replace(class1, class2) 顾名思义，把元素中的类class1替换成class2

例子

const div = document.createElement('div');

div.classList.add("foo", "bar", "thirdClass");  //为元素添加多个类

div.classList.length; //查看有多少个类名

div.classList.remove("foo", "bar");  //移除多个类

div.classList.toggle("visible");  //存在visible则删除，不存在则增加visible

console.log(div.classList.contains("foo"));  //判断是否存在foo

console.log(div.classList.item(0));  //获取第一个类名

//操作多个类
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);