原生dom如何对元素的class进行操作

今天看书时突然发现了classList属性,是DOMTokenList的实例,以数组的形式保存元素的class属性。

classList可以用来很方便的操作元素的class,对其增删该查操作。

说来惭愧,一直以来都是用jquery对元素的class进行操作,以为原生js的class操作必须要通过className属性来实现,指导今天才发现了原来H5早就提供了classList这一属性来方便开发人员编写代码。

DOMTokenList与数组类似,包含length属性,可以使用item()或者方括号来获取每个元素,同时还定义了以下方法来操作数组。

1. add(value):添加一个类,如果已存在则不添加。

2. contains(value):检测是否存在给定的值。返回true或false

3.remove(value):从列表中移除给定的class。

4.toggle(value):如果列表中已存在给定的值,删除它;如果不存在则添加它。

有了classList属性,除非是要完全清除所有类名,或者重写元素的class属性,否则就完全用不到className了。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章