使用HTML5的classList可以像jQuery一样去操作DOM节点的CSS类

① 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。

② 使用classList，我们还可以用它来判断某个节点是否被赋予了某个CSS类。

③ Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。

④ 相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。

• 新增CSS类

使用add方法，你可以往页面元素是新增一个或多个css类：

myDiv.classList.add('myClass');
myDiv.classList.add('myClass1'， 'myClass2', ...);

• 删除一个CSS类

使用remove方法，你可以删除单个CSS类：

myDiv.classList.remove('myClass1');
myDiv.classList.remove('myClass1', 'myClass2', ...);

你可以在这个方法里一次传入多个类名，用空格分开，但执行的结果很有可能不是你预期的。

• 反转CSS类的有无

myDiv.classList.toggle('myClass'); //现在是增加
myDiv.classList.toggle('myClass'); //现在是删除

当myDiv元素上没有这个CSS类时，它就新增这个CSS类；
反之，如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。

• 替换某个类

div.classList.replace("myClass1", "myClass2");

该方法两个参数，第二个把第一个替换掉。

• 检查是否含有某个CSS类

myDiv.classList.contains('myClass');  //returns true or false

目前，几乎所有的现代浏览器(谷歌浏览器，火狐浏览器（Firefox 26 以下的版本并未实现 add/remove/toggle方法中的所有参数）等)都支持这个classList类，所以，相信新型的javaScript类库里都会使用classList类来操作页面CSS类，而不需像以前一样去分析元素节点的class属性！