原生dom如何對元素的class進行操作

2021-08-22 04:46:34 字數 549 閱讀 1232

今天看書時突然發現了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了。

原生JS獲取DOM元素的方法

js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...

原生JS獲取dom元素高度

clientheight,scrollwidth,offsetwidth的區別 用body 測試 網頁實際寬 document.body.clientwidth 網頁實際高 document.body.clientheight 網頁實際寬 document.body.offsetwidth 包括邊線...

DOM對元素屬性的操作

獲取元素屬性值 input.getattribute type 給元素新增屬性值 第乙個引數是屬性名,第二個引數是屬性的值 必須兩個引數 input.setattribute yes ok yes ok新增屬性 乙個值 input.attributes.setnameditem disabled 建...