HTML5 DOM元素类名相关操作API classList简介

1、传统方法：

在操作类名的时候，需要通过className属性添加、删除和替换类名。如下面例子：

<div class="bd user disabled">...</div>

这个div中一共有三个类名，要从中删掉一个类名，需要把这三个类分别拆开，然后进行处理，处理过程如下：

<script type="text/javascript">
       var className=div.className.split(/\s+/);
       //找到要删掉的类名
       var pos=-1,
           i,len;
       for (var i = 0; i < className.length; i++) {
           if(className[i]=="user"){
              pos=i;
              break;
           }
       };
       className.splice(i,1);
       div.className=className.join(" ");//将余下的类名重新拼装
   </script>

上述方面即为传统的方法。

2、html5新增方法classList(),可以完全摆脱className属性。

具体使用案例如下：

<title>classList Example</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
 
 
<div id="myDiv" class="init">Hello world!</div>
<input type="button" value="Add class" οnclick="addClass()">
<input type="button" value="Remove class" οnclick="removeClass()">
<input type="button" value="Toggle class" οnclick="toggleClass()">
<input type="button" value="Contains class?" οnclick="containsClass()">
<p>This demo works in Firefox 3.6 and Chrome 8.</p>
 
<script type="text/javascript">
    function addClass(){
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.add("highlight");
    }
 
    function removeClass(){
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.remove("highlight");
    }
 
    function toggleClass(){
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.toggle("highlight");
    }
 
    function containsClass(){
        var myDiv = document.getElementById("myDiv");
        alert(myDiv.classList.contains("highlight"));
    }
 
</script>

注：但是目前classList属性只有FireFox3.6+和Chrome支持。