在开发中,经常碰到需要为某个DOM节点添加或去除一个class
的情况。
在这种情况下,要移除一个class
,一般的做法是拿到DOM节点的className
属性,然后将其拆分成数组。然后遍历数组元素找到要移除的属性然后将该项删除,把数组重新拼成字符串然后重新设置DOM节点的className
属性。代码如下:
//假设div变量是一个DOM对象,'foo'是要移除的class
let className = div.className.split(' ');
let index = 0;
for(let i=0, length=className.length; i<length; i++){
if(className[i] == 'foo'){
index = i;
break;
}
}
className.splice(i, 1);
div.className = className.join(' ');
添加一个class
虽然比移除要简单,但是要拼接字符串,这样的解决方法显然不够优雅。
HTML5定义了大量的JavaScript API,其中包括classList
属性。HTML5为所有的元素都添加了这个属性,这个属性是DOMTokenList
的实例。
一个DOM节点的所有class都可以在classList
里被访问。而添加而移除class的操作也因此变得十分简便。上面写的那么多行代码,现在仅需div.classList.remove('foo')
这一行即可代替。
同样的,添加也十分简单,div.classList.add('foo')
。
除此之外,classList
还有以下方法:
- contains(value):表示列表中是否存在给定的值
- toggle(value):如果列表中已经存在给定的值则删除它,若不存在则添加
有了classList
之后,除了完全重写和完全删除类名,就基本用不到className
属性了。