HTML5-通过classList获取html元素的所有class名

HTML5 有个新属性：classList属性，它可以弹出所有的class名称。classList是一个类数组的对象。下例是打印 div 的 class 的值。

    <script>
        window.onload = function(){
            var oDiv = document.getElementById("box");
            console.log(oDiv.classList);
        }
    </script>

    ……
 
    <div id="box" class="box1 box2 box3"></div>

另外，classList 下面还有几个方法与属性：

• length：class 的长度，上例执行 console.log(oDiv.classList.length); 则会打印出3
• add()：添加 class，上例执行 oDiv.classList.add(“box4”); 即可添加一个 box4 的class名进去
• remove()：删除 class 的方法，上例执行 oDiv.classList.remove(“box2”); 则会删除 box2 这个class名
• toggle()：切换 class，上例如果执行一次 oDiv.classList.toggle(“box4”); 则会添加一个 box4 的 class名进去，如果再执行一次 oDiv.classList.toggle(“box4”); 则会删除刚刚添加的 box4。它的意思就是 如果 toggle 传入的 class 名，在原来的class 内存在，则是执行删除操作，如果不存在，则是从末尾添加进去 class 。

            oDiv.classList.toggle("box4"); //添加上 box4 这个 class
            console.log(oDiv.classList);
            oDiv.classList.toggle("box4"); //再次执行会删除 box4 这个 class
            console.log(oDiv.classList);