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

转载于:https://www.cnblogs.com/-------perfect/p/4731928.html