Element.classList 是一個只讀屬性，返回一個 DOMTokenList，其中包含元素所有現有的 class 屬性。
使用 classList 要比 element.className 方便不少，後者是一個用空格分隔的字符串。
語法
var elementClasses = elementNodeReference.classList;elementClasses 是一個 DOMTokenList ，代表 elementNodeReference 的 class 屬性 。如果沒有 class 屬性或爲空，則 elementClasses.length 返回 0。element.classList 本身是隻讀的，但可以使用 add() 和 remove() 方法修改它。
常用方法
add( String [, String] )
添加給定的 class 。元素已有的 class 會被忽略。
remove( String [,String] )
移除給定的 class 。
item ( Number )
根據索引位置，返回 class 值。
toggle ( String [, force] )
僅傳一個參數時：切換 class 屬性。亦即，當該 class 存在時移除並返回 false，否則增加該 class 並返回 true。
傳入第二個參數時：若第二個參數爲 true 則增加該 class，若爲 false 則移除。
contains( String )
檢查元素是否擁有給定的 class。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var i = 3;
var onLoadFunct = function() {
var div = document.getElementById("div");
// div 是一個 <div> 元素的對象引用，擁有 class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// 如果存在 visible，則移除，否則添加
div.classList.toggle("visible");
// 增加或刪除 visible，取決於條件 i < 10 的取值結果
div.classList.toggle("visible", i < 10);
alert(div.classList.contains("foo"));
div.classList.add("foo", "bar"); //添加多個 class
}
</script>
</head>
<body onload="onLoadFunct()">
<div id='div' class="foo bar"></div>
</body>
</html>