classList属性详解

简介: 之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。

之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。

支持classList属性的浏览器版本:

语法:element.classList

方法:

add(class1, class2, ...): 在元素中添加一个或多个类名, 如果指定的类名已存在,则不会添加

contains(class): 返回布尔值,判断指定的类名是否存在

item(index): 返回类名在元素中的索引值, 索引值从 0 开始, 如果索引值在区间范围外则返回 null

remove(class1, class2, ...): 移除元素中一个或多个类名, 注意: 移除不存在的类名,不会报错

toggle(class, true|false): 在元素中切换类名

           第一个参数为要在元素中移除的类名,并返回 false。如果该类名不存在则会在元素中添加类名,并返回 true

           第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在

每一次的记录,都是向前迈进的一步
目录
相关文章
|
2月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
85 3
nodeValue 属性
`nodeValue`属性用于获取节点的值。在元素节点中,它返回`undefined`;对于文本节点,它返回文本内容;在属性节点中,它返回属性的值。示例代码获取元素的第一个属性值。
nodeValue 属性
`nodeValue`属性用于获取节点的值。在元素节点中,它返回`undefined`;在文本节点中,返回文本内容;在属性节点中,返回属性值。例如,代码用于获取元素的第一个子节点的`nodeValue`。
|
6月前
element-Cascader级联选择器用法?
element-Cascader级联选择器用法?
|
JavaScript
DOM对象中的常用属性(innerHTML属性,innerText属性,className属性,style属性)
DOM对象中的常用属性(innerHTML属性,innerText属性,className属性,style属性)
DOM对象中的常用属性(innerHTML属性,innerText属性,className属性,style属性)
textContent、innerText、innerHTML属性
textContent、innerText、innerHTML属性
145 0
|
JavaScript
jquery attr()方法获取input的checked属性问题
jquery attr()方法获取input的checked属性问题
131 0
innerHTML和innerText的区别
innerHTML和innerText的区别
135 0