便捷地添加或去除class--classList

在开发中，经常碰到需要为某个DOM节点添加或去除一个class的情况。

在这种情况下，要移除一个class，一般的做法是拿到DOM节点的className属性，然后将其拆分成数组。然后遍历数组元素找到要移除的属性然后将该项删除，把数组重新拼成字符串然后重新设置DOM节点的className属性。代码如下：

//假设div变量是一个DOM对象，'foo'是要移除的class
let className = div.className.split(' ');
let index = 0;
for(let i=0, length=className.length; i<length; i++){
    if(className[i] == 'foo'){
        index = i;
        break;
    }
}
className.splice(i, 1);
div.className = className.join(' ');

添加一个class虽然比移除要简单，但是要拼接字符串，这样的解决方法显然不够优雅。

HTML5定义了大量的JavaScript API，其中包括classList属性。HTML5为所有的元素都添加了这个属性，这个属性是DOMTokenList的实例。

一个DOM节点的所有class都可以在classList里被访问。而添加而移除class的操作也因此变得十分简便。上面写的那么多行代码，现在仅需div.classList.remove('foo')这一行即可代替。

同样的，添加也十分简单，div.classList.add('foo')。

除此之外，classList还有以下方法：

• contains(value)：表示列表中是否存在给定的值
• toggle(value)：如果列表中已经存在给定的值则删除它，若不存在则添加

有了classList之后，除了完全重写和完全删除类名，就基本用不到className属性了。