classList詳解，讓你的js方便地操作DOM類

在此之前，jQuery的hasClass、addClass、removeClass我們已經再熟悉不過了，然而我們並不會在每一個項目中都會去使用jQuery或者Zepto，譬如在移動端的網頁中，考慮到傳說中的性能和靜態資源的請求量等因素，我們通常會選擇採用原生js，而對於元素的class操作。你首先想到的就是className，這位夥計完美地得到了包括ie6在內的所有古現代瀏覽器的支持，儘管它的功能簡直弱爆，但是人們在相當長的一段時間還是用得不亦樂乎，甚至一些基礎庫也只是通過className進行了一些擴展。但是隨着瀏覽器的不斷升級，更多豐富的JavaScript API得到了支持，本文講述的classList就是其中一個。它可以方便地對元素的類名進行增刪改查，當然，API的設計者並不會幫你做所有的事，它仍然存在一些小小的缺陷，但相比className，這已經是一個飛躍了。

classList的兼容性如下圖所示：

 

從上圖可以看到，嚴重拖後腿的還是那個IE，直到IE10，微軟才總算反映了過來。而在移動端方面，除了安卓2.3及其以下版本的webview不支持classList，其它瀏覽器終端都能很好地支持。由於安卓2.3的設備和IE一樣已然明日黃花，所以我們仍然可以和classList愉快的玩耍，尤其是在基於webkit內核的終端。現在，就讓我們進入正題吧（尼瑪，原來前面一堆都是廢話）

classList是html元素對象的成員，它的使用非常簡單。我們通過以下方式：

console.dir(document.body.classList);

1. 1
2. 2

代碼laycode - v1.1

發現它的構造器（constructor）是DOMTokenList。它提供了這些已知的API：length、item、add、remove、contains、toggle。其它灰色部分如toString可以先無視。

下面我們對classList的成員進行逐一介紹：

length

靜態屬性。獲取元素類名的個數，使用方式：

var len = document.body.classList.length;

1. 1
2. 2

代碼laycode - v1.1

item

方法。獲取元素的類名，接受一個參數，即數字索引。使用方式：

//如果index超出範圍，則返回null
var cls = document.body.classList.item(index); 

1. 1
2. 2
3. 3

代碼laycode - v1.1

add

方法。用於增加元素的類，接受一個參數，即類名。使用方式：

document.body.classList.add('myclass');

//遺憾的是，它一次性只能增加一個類，比如以下方式將會報錯
document.body.classList.add('class1 class2');

1. 1
2. 2
3. 3
4. 4
5. 5

代碼laycode - v1.1

如果需要增加多個類，你只能執行多次add。

remove

方法。用於刪除元素的類，接受一個參數，即類名。和add一樣，它一次性只能刪除一個類。使用方式：

document.body.classList.remove('myclass');

1. 1
2. 2

代碼laycode - v1.1

contains

方法。用於檢測元素是否包含某個類，返回Boolean值。使用方式：

document.body.classList.contains('myclass'); //返回true或者false

1. 1
2. 2

代碼laycode - v1.1

toggle

方法。這個傢伙是add、remove、contains的三合一版，不僅能檢測元素是否包含某個類，而且還具備增刪功能，即如果存在某個類，就remove掉，如果不存在，就add一下。返回一個Boolean值。使用方式：

//如果body不存在classtest的類名，就會給body增加一個classtest的類
document.body.classList.toggle('classtest'); //true

//再執行一遍，classtest已被刪除了
document.body.classList.toggle('classtest'); //false

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

代碼laycode - v1.1

classList的便捷性只是原生JavaScript的冰山一角，事實上標準瀏覽器對dom的操作已經非常方便了，尤其是選擇器的查找，如getElementsByClassName、querySelector和無敵的querySelectorAll等等。當你使用jQuery或者Zepto根本停不下來的時候，或許你需要撫慰下你忙碌的雙手，擁抱Native，那是一片廣袤無邊的天地！