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