classList 属性介绍

2019-05-09
CSS
5448

今天无意中发现了一个非常好用的api--classList,来介绍一下

先看一个官方解释

Element.classList 是一个只读属性,返回一个元素的类属性的实时DOMTokenList 集合。

什么意思呢,其实就是获取元素的className,但是返回的是元素所有class组成的数组,例

var $content = document.querySelector('.main-content')
console.log($content.classList) // DOMTokenList ["main-content", value: "main-content"]

与className不同的在于,className属性返回以空格分割的class组成的字符串,而classList返回一个类数组对象。看一段代码

var $content = document.querySelector('.main-content')
$content.className; // 'main-contnet'
console.log($content.classList) // DOMTokenList ["main-content", value: "main-content"]

那么classList有哪些好处呢,它提供以下方法,方便操作

add( String [, String] )

添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。

remove( String [,String] )

删除指定的类值。

item ( Number )

按集合中的索引返回类值。

toggle ( String [, force] )

当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。 当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它

contains( String )

检查元素的类属性中是否存在指定的类值。

replace( oldClass, newClass )

用一个新类替换已有类。

在jquery 一统天下的时代,元素class操作是很方便的,比如

// 添加className
$el.addClass('className')
// 删除className
$el.removeClass('className')

但是当jquery逐渐退出历史舞台,很多时候就需要一些原生的js,这时像classList相比className就方便很多。

最后再关注一下classList的浏览器支持情况

可以看到IE是兼容到10,如果在不考虑IE的情况下,还是可以用的。而ClassName是IE6就开始支持,所以要兼容IE低版本,className属性是为首选。

参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList