楔子
最近在看JavaScript高程设计，越看越觉得JS真的博大精深，每读一次都会有新的收获。今天我们就来说一说classList这个API。
前言
JS操作元素类名的API最熟悉的莫过于className，常规用法如下
<div id=“box1”></div>
<script>
var box1 = document.getElementById("box1");
box1.onclick = function(){
this.className = "warn";
}
<script>
相信类似这样的写法大家肯定很常见，但是className的弊端很明显，假如元素有多个类名，我想要移除其中一个怎么办？
<div class="box warn noBorder" id="box1"></div>
如果我想移除.box类，如何写？简单
<script>
box1.className = "warn noBorder";
</script>
事实上，复杂的地方在于很多时候你并不知道元素真正类名有多少，而且也不可能每次都手写这么多类名组成的字符串。
当然你也可以通过以下代码部署：
var className = box1.className.split(/\s+/);//将className字符串分割成数组
var pos = -1,
len = className.length;
for(var i = 0;i < len;i++){
if(className[i] === "warn"){
pos = i;
}
}
className.splice(i,1);//从数组中移除该项
box1.className = className.join(" ");//将数组转换成字符串
很麻烦是不是？还好JQ封装了2个方法，addClass()和removeClass()。利用这2个方法，你可以直接给元素添加/移除类名，这也可以看出JQ流行的原因。
但是为了这么个简单的问题你要我引入JQ库？ok，猪脚登场。
classList
classList,简单来说，就是为了增加/切换/移除 class类新增的API。返回的是元素的类名。本质上是DOMTokenList.
关于DOMTokenList
这里引用 mozilla MDN上的一段话：
The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.
翻译过来就是：
DOMTokenList这种类型表示一组空间分隔的标记。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList或HTMLAreaElement.relList返回。从0开始的类JavaScript数组索引。DOMTokenList始终是区分大小写的。
也就是说 classList relList都属于DOMTokenList.
兼容性
来看下classList的兼容性。
这里需要说明下，IE10也是兼容classList的，只不过同IE11一样，add/remove方法不支持多参数处理。默认只会处理第一个参数
属性
- length属性
返回的是元素类名的长度，只读 - value属性
返回元素类名的字符串形式
方法
- add()
添加类名，支持多个类名添加。IE10/IE11不支持多参数
box1.classList.add("warn","error","tips");
- remove()
移除类名，支持多个类名移除。IE10/IE11不支持多参数
box1.classList.remove("box","warn","noBorder");
contains()
参数为字符串，如果元素有该类名返回true,没有则返回falsetoggle()
类名切换，如果原来有该类名则移除；如果没有则添加。
简单应用
一个div元素，点击添加某样式，再点击移除该样式。
var Odiv = document.getElementById("box1");
Odiv.onclick = function(){
this.classList.toggle("styleName");
}
好了，classList介绍到这，滚去看红皮书咯。
