原生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了。

 

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