深入了解Element​.class​List

平时使用时就是classList.add、classList.remove等方法。但还真不知道classList是一个数组，其次就是add、remove、toggle等可以有多个参数。这篇算是深入了解一下Element.classList并加深理解。

Element.classList是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。使用classList是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。虽然element.classList本身是只读的，但是你可以使用 add() 和 remove()方法修改它。

方法

add( String [, String] )

添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

remove( String [,String] )

删除指定的类值。

item ( Number )

按集合中的索引返回类值。

toggle ( String [, force] )

当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。

当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

contains( String )

检查元素的类属性中是否存在指定的类值。

replace( oldClass, newClass )

用一个新类替换已有类。

示例
 

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

//起始状态: <div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类名
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果设置了visible，则将其移除，否则将其添加
div.classList.toggle("visible");

// 添加/移除visible类名, 是根据测试条件，i小于10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加/移除多个类名
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

//添加/移除多个类名时使用展开语法(Spread syntax)
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

//替换foo类名为bar类名
div.classList.replace("foo", "bar");

//假设div上有类名为foot、bar。
div.classList.item(0);//返回foot
div.classList.item(1);//返回bar
div.classList.item(2);//索引超出范围返回null
div.classList.item("xinran001.com");//不存在的字符串索引则返回第一个索引foot