常我们在操作类名时，需要通过 className 属性来添加，删除和替换类名。
因为 className 中是一个字符串，所以即使我们只是修改字符串的一部分，也要每一次都重新设置整个字符串的值。
如果一个元素有多个类名，要如何删除呢，jqeury 提供了 removeClass()这个 api，如果不用插件，自己封装，例如有下面的代码：
- <div class="name1 name2 name3"></div>
这个元素中共有三个类名。如果要删除第一个类名 name1，需要把这三个类名拆开，删除不需要的类名，然后在将余下的类名组合后重新放回去，代码如下：
- function removeClass(elm,removeClassName) {
- //首先渠道类名字符串并拆分成数组
- var classNames = elm.className.split(/\s+/);
- var pos = -1, i, len;
- //找到要删的类名
- for (i = 0, len = classNames.length; i < len; i++){
- if(classNames[i] == "name1") {
- pos = i;
- break;
- }
- }
- if(pos == -1){
- throw Error("没有这个类名");
- }
- //删除类名
- classNames.splice(i,1);
- //把剩下的类名拼成字符串重新设置
- elm.className = classNames.join(" ");
- }
在传统的 javascript 中，要完成类名的删除，上面的代码步骤是必须的。
在 HTML5 中新增了一个操作类名的方式，可以让操作更加简单安全，这个方式就是为所有的元素添加 classList 属性。
这个 classList 属性是新集合类型 DOMTokenList 的实例。
与其它 DOM 集合类似，DOMTokenList 有一个表示自己包含多少个元素的 length 属性。
要取得每一个元素可以使用 item()方法，也可以使用方括号语法。
另外，这个新类型还定义了下面的一些特殊方法：
- add(value)：将指定的字符串值添加到列表中。如果值已经存在则不会添加
- contains(value)：指定列表中是否存在已给定的值。存在则返回 true，否则返回 false
- remove(value)：从列表中删除指定的字符串
- toggle(value)：如果列表中已经存在指定的值则删除它，否则将指定的值添加到列表中
当然 html5 新增了操作类名的方式 classList 他有 5 个属性，如果使用 classList，前面例子使用一句代码就可以完成了。
- div.classList.remove("name1");
其它的方法也能够大大的减少类似传统 js 操作的复杂性，例如：
- //删除"disabled"类
- div.classList.remove("disabled");
- //添加"current"类
- div.classList.add("current");
- //切换"user"类
- div.classList.toggle("user");
- //确定元素中是否包含既定的类名
- if (div.classList.contains("bd") && !div.classList.contains("disabled")){
- //执行操作
- )
- //迭代类名
- for (var i=0, len=div.classList.length; i < len; i++){
- doSomething(div.classList[i]);
- }
但是支持浏览器比较少（classList 兼容性有些差，不兼容 ie10 以下的 ie 浏览器）， ie10+,Firefox 3.6+和 Chrome。
