classList和DOMTokenList

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

MDN文档上,classList的英文定义比中文的要更更让人容易明白。。。

1.它是一个只读属性
2.它返回一个元素的class属性的实时的 DOMTokenList 集合
3.它可以操纵我们的class属性

这段定义中还有一个 DOMTokenList 的概念。

The DOMTokenList interface represents a set of space-separated tokens.

1.它是一个接口
2.它表示一组由空格分开的标记

让我们看个例子

<p class="a b c"></p>

<script>
	let el = document.getElementsByClassName('a')[0]
	console.log(el.outerHTML)
	console.log(el.classList)
	console.log(typeof el.classList)
</script>

在这里插入图片描述

一目了然。

不过还有一点比较让人矛盾的地方:

虽然 element.classList 本身是只读的,但是你可以使用 add() 和 remove() 方法修改它。

当然处理add()和remove()外还有其他方法,这里不再列举。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页