javascript中使用classList操作DOM class的增加修改删除
classList实际上已经出现好多年了，因此，自然，FireFox浏览器，Chrome浏览器都支持的很。IE家族中，从IE10浏览器开始才开始认可classList能进能退的非一刀切做法。
手机上，Android 3.0+以上才开始支持，哦，该死，这很糟糕。现在手机web app要求android 2.*也要支持。实时兼容性查看点击这里。
由此可见，在PC上，如果要判断是否是IE10+以及其他现代浏览器，可以试试：document.body.classList是否为undefined.
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掉了[via]http://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/[/via]
评论