腳本化CSS類-HTML5 classList屬性

　　HTML元素能夠有多個CSS類名，class屬性保存了一個用空格隔開的類名列表。標識符class在JavaScript中是保留字，因此在JavaScript中能夠用className。　　

            //以下代碼設置和清除元素的className屬性來爲元素添加或移除attention類
            function grabAttention(e){e.className="attention";} function releaseAttention(e){e.className="";}

　　然而className屬性是一個容易誤解的名字：classNames可能更容易理解。就像getElementById()方法能夠返回一個元素，getElementsByTagName(),getElementsByClassName(),getElementsByName()返回的是一個只讀的類數組對象(NodeList)。

　　上面的代碼中假設className屬性只指定零個或一個類名，這顯然不能不知足實際開發過程當中涉及多個類名的須要了。

　　HTML5解決了這個問題，爲每一個元素定義了classList屬性。該屬性是DOMTokenList對象：一個只讀的類數組對象。提到類數組，你們確定會想到Array.prototype.XX.call(e.classList)來調用Array方法了。可是和數組元素相比，DOMTokenList定義的方法更加有實用。

　   1.add() 給元素的class屬性添加一個類名。

　   2.remove() 從元素的class屬性中清除一個類名。

　　3.toggle() 表示若是元素不存在類名就添加，不然就刪除它。很是實用的！！！相似於JQuery的toggleClass()方法。

　　4.contains() 檢測class屬性中是否包含一個指定的類名。

 　　相似其餘DOM集合類型，DOMTokenList對象"實時地"表明了元素類名的集合，而並不是是在查詢classList屬性時的一個靜態快照。一樣，DOMTokenList對象也是雙向的。所謂雙向性便是，若是從元素的classList屬性中得到了一個DOMTokenList對象，而後元素的className屬性改變了，這些變化在標識列表中及時可見。一樣，改變標識列表，在className屬性中及時可見。也就是說 classList除了上面四個重要方法外，還有實時性，雙向性的特色。 

　　除了classList，還有前面講過的dataset屬性也是擁有實時性、雙向性的喲。

　　注意：queryElementsByTagName(),queryElementsByClassName(),queryElementsByName()返回的NodeList對象也是實時的，而querySelectorAll()返回的NodeList並非實時的。

 

　　源自《JavaScript權威指南》 16.5