先看各浏览器的兼容性：classList的兼容性
在chrome浏览器控制台中输入以下命令得到：
>document.body.classList <!--结果:--> ["is-home", value: "is-home"] length:1 value:"is-home" 0:"is-home" __proto__:DOMTokenList add:function add() contains:function contains() entries:function entries() forEach:function forEach() item:function item() keys:function keys() length:(...) remove:function remove() supports:function supports() toString:function toString() toggle:function toggle() value:(...) values:function values() constructor:function DOMTokenList() Symbol(Symbol.iterator):function values() Symbol(Symbol.toStringTag):"DOMTokenList" get length:function () get value:function () set value:function () __proto__:Object()
可见其直接暴露的API有：
length 属性，表示元素类名的个数，只读
item() 支持一个参数，为类名的索引，返回对应的类名，例如上例：
document.body.classList.item(0);
结果是：”a”.
如果索引超出范围，例如：
document.body.classList.item(3);
结果是：null.
add() 支持一个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。例如：
document.body.classList.add(“c”);
document.body.classList.length // 3
此函数方法执行的返回值是undefined, 因此，classList的add()方法是无法级联的。下面的remove()方法也是如此。
remove() 支持一个类名字符串参数。表示往类名列表中移除该类名。例如：
document.body.classList.remove(“c”);
document.body.classList.length // 2
有点对应于jQuery中的removeClass()方法，然后者返回包装器对象本身，可级联；这里的remove()方法返回undefined.
toggle() 支持一个类名字符串参数。无则加勉，有则移除之意。若类名列表中有此类名，移除之，并返回false; 如果没有，则添加该类名，并返回true.
部分现代浏览器，例如Chrome浏览器以及Firefox 24的toggle()方法已经支持第2个参数，.toggle(token, switch). 其中参数switch为Boolean类型值，如果为true表示添加，如果为false则表示移除。并返回该Boolean值。
contains() 支持一个类名字符串参数。表示往类名列表中是否包含该类名。有点对应jQuery中的hasClass方法，注意，这里的是contains而不是contain，后面有个s哦！
返回值很易懂的。如果包含，则返回true, 不包含，则false. 例如：
document.body.classList.contains(“c”); // false 因为”c”上面remove掉了
在Firebug控制台结果中，我们还看到了toString()方法。实际上，Chrome浏览器也有（未直接显示），IE10也有，不过，似乎来自层级更高对象的继承。
就作用上讲，等同于className. 例如：
document.body.classList.toString() === document.body.className; // true
classList除了上面提到的不能级联这个无关痛痒的局限外，还有个比较头疼的局限，就是不能一次add或remove或toggle多个类名。//zxx: 级联指的是$().a().b().c()这种可以连在一起调用方法的写法。例如：
document.body.classList.add(“c d”); // Error: String contains an invalid character
document.body.classList.add(“c\x20d”); // Error: String contains an invalid character
document.body.classList.remove(“c d”); // Error: String contains an invalid character
我们要想多类名处理，需要一个一个来，例如：
var clList = document.body.classList;
clList.add(“d”);
clList.add(“e”);
clList.toString(); // “a b c d e”
这一点来看，原生的classList API要比jQuery或MooTools等框架的addClass/removeClass/…等类名相关外挂方法弱爆了。然而，classList API没有恋爱经历、非常单纯。因此，虽然胸小了一点；但是，富豪就是喜欢之。
add的参数个数限制等方法好比生孩子，一次只能生一个，这符合国家要求符合规范。但是，有些有钱人，就像张艺谋，就愁孩子少，恨不能一次生他3个，咋办呢？我们可以试试对classList做扩展，例如扩展一个adds方法，可以一次添加多个类名，多个类名以空格分隔：
DOMTokenList.prototype.adds = function(tokens) {
tokens.split(” “).forEach(function(token) {
this.add(token);
}.bind(this));
return this;
};
// 看看能不能一下子生3个孩子
var clList = document.body.classList;
clList.adds(“child1 child2 child3”).toString(); // “a b c child1 child2 child3”