DOM对象的classList对象属性介绍与用法

email：gm4linus at gmail dot com

大家经常使用JQuery这样的JS框架提供的类似于addClass、removeClass等方法来操作DOM对象上的class。

DOM4级规定DOM对象需要实现一个名为classList的对象属性，该属性中提供了一些方法用于操作DOM class的方法，虽然现在尚处于草案阶段，但已经被浏览器广泛支持，从http://caniuse.sinaapp.com/html/item/classlist/index.html网站可以看出浏览器兼容性还是不错的。

所有方法介绍如下：

add ： 为DOM对象加class。

remove ：从DOM对象删class 。

contains ：检测DOM对象是否已经应用了某class。

toggle ：若DOM对象已经应用了某class则删除，若未应用则添加。

item ：获取指定下表的class名字。

属性介绍：

length ：DOM上应用class的个数

代码示例：

var clsList = document.getElementById("cuebar").classList;

clsList.add("some-css-class"); // 添加样式。

clsList.remove("some-css-class"); // 删除样式。

if(clsList.contains("some-css-class")){ // 是否已经使用了某样式。
    // do something
}

clsList.toggle("some-css-class"); // 如果some-css-class已经存在那么删除，如果不存在那么添加。

for(var i = 0; i < clsList.length; i++){
	console.log(clsList.item(i));
}