JavaScript ? 第11章 ?DOM擴(kuò)展
11.3 ?HTML5
11.3.1與類相關(guān)的補(bǔ)充
1.getElementsByClassName()方法: ?HTML5添加的這個方法，是最受歡迎的一個方法，可以通過document對象及所有HTML元素調(diào)用該方法，這個方法接收一個參數(shù)，即一個包含一個或多個類名的字符串，返回帶有指定類的所有元素的NodeList，傳入多個類名時，類名的先后順序不重要。
var allCurrentUsernames = document.getElementsByClassName("username current");
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
調(diào)用這個方法時，只有位于調(diào)用元素子樹中的元素才會返回。在document對象上調(diào)用這個方法，會返回與這個類名匹配的所有元素，而在元素上調(diào)用這個方法只會返回后代元素中匹配的元素。
注意：
使用這個方法，可以更方便的為帶有某些類的元素添加事件處理程序，從而不必再局限于使用ID或者是標(biāo)簽名，不過別忘了，因?yàn)榉祷氐膶ο笫荖odeList，所以使用這個方法與使用getElementByTagName()以及其他返回NodeList的DOM方法都具有同樣的性能問題。
兼容性：ie9以上
2.classList屬性
在操作類名的時候，需要通過className屬性去添加、刪除和修改類名，因?yàn)閏lassName中是一個字符串，即使是只修改字符串的一部分，也每次都設(shè)置字符串的值，
例子：
<div class="bd user disabled">...</div>
這個<div>元素一共有三個類名。要從中刪除一個類名，需要把這三個類名拆分開，刪除不想要的那個，然后再將其他類名拼接成一個新的字符串。
//刪除user類
//首先，取得類名字符串并拆分成數(shù)組
var classNames = div.className.split(/\s+/);
//找到要刪除的類名
var pos = -1,i,len;
for(i=0; len = classNames.length; i<len;i++){
? ? ? if(className == " user "){
? ? ? ? ? ? ? ?pos=i;
? ? ? ? ? ? ? break;
? ? ? }
}
//刪除類名
classNames.splice(i,1);
//把剩下的類名拼接成字符串并重新設(shè)置
div.className = ?classNames.join(" ");
注意
html5新增了一種操作類名的方式，可以讓操作變得比較簡單起來，那就是為所有元素添加classList屬性。這個屬性時新集合類型DOMTokenList的實(shí)例，與其他DOM集合類似，DOMTokenList有一個表示自己包含多少元素的length屬性，而要取得每個元素可以使用item()方法，也可以使用方括號語法。此外，這個新類型還定義如下方法。
add(value):將給定的字符串添加到列表中。如果值已經(jīng)存在，就不添加了。
contains(value):表示列表中是否存在給定的值，如果存在就返回true，否則返回false。
remove(value): 從列表當(dāng)中刪除給定的字符串。
toggle(value): 如果列表中已經(jīng)存在給定的值，刪除它；反之添加它。
這樣前面的那么多代碼就可以用一行代碼替換： div.classList.remove("user");
div.classList.add("add");
div.classList.remove("remove");
div.classList.toggle("toggle");
if(div.classList.contains("contains") && ?!div.classList.contains("disabled")){ ?執(zhí)行操作 ?}
作用：除非你要全部刪除類名，或者全部替換類名，否則沒必要使用className屬性
兼容性： Firefox 3.6+和chrome
