HTML5与类相关的补充classList属性

classList属性

在操作类名的时候，我们会通过className属性添加删除类名
className是一个字符串，每次修改只能修改字符串的一部分
如果一个元素有多个类名，要删除其中一个必须将三个类名拆开，删除不想要的，然后再把剩下的拼接成一个新的字符串

例１

<div class="wrapper content footer"></div>

删除div元素的footer类

<script type="text/javascript">
        //首先，取得类名字符串拆分成数组
        var className = div.className.split(/\s+/);
        //找到要删除的类名
        var flag = -1,
            i,
            len;
        for(i = 0,len = classNames.length; i < len; i++){
            if(classNames[i] == "footer"){
                flag = i;
                break;
            }
        }
        //删除类名
        classNames.splice(i,1);
        //将剩下的类名重新组合成字符串
        div.className = classNames.join(" ");
    </script>

HTML5新增了一种操作类名的的方式，可以简化操作，即为所有的元素添加一个classList属性，定义了如下方法：

方法	作用
remove(String[,String])	删除指定的类值
add( String[,String])	添加指定的类值,如果这些类已经存在于元素的属性中，那么他们将被忽略
item(Number)	按集合中的索引返回类值
contains(string)	检查元素的类属性中是否存在指定的类值
toggle(String[,force])	当只有一个参数的时，如果类存在，删除它，并返回false，如果类不存在，则添加它并返回true。当存在第二个参数时，如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

例子

<div class="wrapper content footer"></div>

//删除一个类
div.classList.remove("wrapper");
//添加一个类
div.classList.add("demo");
// 当只有一个参数的时候，如果类存在就删除，不存在就添加
div.classList.toggle("demo");

// 当存在第二个参数时，如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
div.classList.toggle("aaa", i < 10);

//添加或删除多个类
div.classList.add("aaa","bbb");
div.classList.remove("aaa", "bbb");