脚本化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