HTML5與類有關的擴充

對於傳統HTML而言，HTML5是一個叛逆。全部以前的版本對JavaScript接口的描述都不過三言兩語，主要篇幅都用於定義標記，與JavaScript相關的內容一律交由DOM規範去定義。

而HTML5規範則圍繞如何使用新增標記定義了大量JavaScript API。其中一些API與DOM重疊，定義了瀏覽器應該支持的DOM擴展。

與類相關的擴充

HTML4在Web開發領域獲得普遍採用後致使了一個很大的變化，即 class 屬性用得愈來愈多，一方面能夠經過它爲元素添加樣式，另外一方面還能夠用它表示元素的語義。因而，天然就有不少JavaScript代碼會來操做CSS類，好比動態修改類或者搜索文檔中具備給定類或給定的一組類的元素，等等。爲了讓開發人員適應並增長對class 屬性的新認識，HTML5新增了不少API，致力於簡化CSS類的用法。

1. getElementsByClassName() 方法

HTML5添加的 getElementsByClassName() 方法是最受人歡迎的一個方法，能夠經過document 對象及全部HTML元素調用該方法。這個方法最先出如今JavaScript庫中，是經過既有的DOM功能實現的，而原生的實現具備極大的性能優點。

getElementsByClassName() 方法接收一個參數，即一個包含一或多個類名的字符串，返回帶有指定類的全部元素的 NodeList 。傳入多個類名時，類名的前後順序不重要。來看下面的例子。

//取得全部類中包含「username」和「current」的元素，類名的前後順序無所謂
var allCurrentUsernames = document.getElementsByClassName(「username current」);
//取得ID爲「myDiv」的元素中帶有類名「selected」的全部元素
var selected = document.getElementById(「myDiv」).getElementsByClassName(「selected」);

調用這個方法時，只有位於調用元素子樹中的元素纔會返回。在 document 對象上調用 getElementsByClassName() 始終會返回與類名匹配的全部元素，在元素上調用該方法就只會返回後代元素中匹配的元素。

使用這個方法能夠更方便地爲帶有某些類的元素添加事件處理程序，從而沒必要再侷限於使用ID或標籤名。不過別忘了，由於返回的對象是 NodeList ，因此使用這個方法與使用 getElementsByTagName() 以及其餘返回 NodeList 的DOM方法都具備一樣的性能問題。

支持 getElementsByClassName() 方法的瀏覽器有IE 9+、Firefox 3+、Safari 3.1+、Chrome和Opera 9.5+。

1. classList 屬性

在操做類名時，須要經過 className 屬性添加、刪除和替換類名。由於 className 中是一個字符串，因此即便只修改字符串一部分，也必須每次都設置整個字符串的值。好比，如下面的HTML代碼爲例。

<div class=「bd user disabled」>…</div>

這個 <div> 元素一共有三個類名。要從中刪除一個類名，須要把這三個類名拆開，刪除不想要的那個，而後再把其餘類名拼成一個新字符串。請看下面的例子。

//刪除「user」類
//首先，取得類名字符串並拆分紅數組
var classNames = div.className.split(/\s+/);
//找到要刪的類名
var pos = -1,
      i,
      len;
for (i=0, len=classNames.length; i < len; i++){
    if (classNames[i] == 「user」){
        pos = i;
        break;
    }
}
//刪除類名
classNames.splice(i,1);
//把剩下的類名拼成字符串並從新設置
div.className = classNames.join(「 」);

爲了從 <div> 元素的 class 屬性中刪除 「user」 ，以上這些代碼都是必需的。必須得經過相似的算法替換類名並確認元素中是否包含該類名。添加類名能夠經過拼接字符串完成，但必需要經過檢測肯定不會屢次添加相同的類名。不少JavaScript庫都實現了這個方法，以簡化這些操做。

HTML5新增了一種操做類名的方式，可讓操做更簡單也更安全，那就是爲全部元素添加 classList 屬性。這個 classList 屬性是新集合類型 DOMTokenList 的實例。與其餘DOM集合相似， DOMTokenList 有一個表示本身包含多少元素的 length 屬性，而要取得每一個元素可使用 item() 方法，也可使用方括號語法。此外，這個新類型還定義以下方法。

• add(value) ：將給定的字符串值添加到列表中。若是值已經存在，就不添加了。
• contains(value) ：表示列表中是否存在給定的值，若是存在則返回 true ，不然返回 false 。
• remove(value) ：從列表中刪除給定的字符串。
• toggle(value) ：若是列表中已經存在給定的值，刪除它；若是列表中沒有給定的值，添加它。

這樣，前面那麼多行代碼用下面這一行代碼就能夠代替了：

div.classList.remove(「user」);

以上代碼可以確保其餘類名不受這次修改的影響。其餘方法也能極大地減小相似基本操做的複雜性，以下面的例子所示。

//刪除「disabled」類
div.classList.remove(「disabled」);
//添加「current」類
div.classList.add(「current」);
//切換「user」類
div.classList.toggle(「user」);
//肯定元素中是否包含既定的類名
if (div.classList.contains(「bd」) && !div.classList.contains(「disabled」)){
    //執行操做
)
//迭代類名
for (var i=0, len=div.classList.length; i < len; i++){
    doSomething(div.classList[i]);
}

有了 classList 屬性，除非你須要所有刪除全部類名，或者徹底重寫元素的 class 屬性，不然也就用不到className 屬性了。

支持 classList 屬性的瀏覽器有Firefox 3.6+和Chrome。

連接