DOMTokenList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DOMTokenList 接口表示一组空格分隔的标记(tokens)。如由 Element.classListHTMLLinkElement.relListHTMLAnchorElement.relListHTMLAreaElement.relList 返回的一组值。它和 JavaScript Array 对象一样,索引从 0 开始。DOMTokenList 总是区分大小写(case-sensitive)。

属性

DOMTokenList.length 只读

一个整数,表示存储在该对象里值的个数。

DOMTokenList.value

该属性以 DOMString 的形式返回 DOMTokenList 列表的值。

方法

DOMTokenList.item(index)

根据传入的索引值返回一个值,如果索引值大于等于符号列表的长度(length),则返回 undefinednull,在 Gecko 7.0 之前的版本中返回 null

DOMTokenList.contains(token)

如果 DOMTokenList 列表中包括相应的字符串 token,则返回 true,否则返回 false

DOMTokenList.add(token1[, token2[, ...tokenN]])

添加一个或多个标记(token)到 DOMTokenList 列表中。

DOMTokenList.remove(token1[, token2[, ...tokenN]])

DOMTokenList 列表中移除一个或多个标记(token)。

DOMTokenList.replace(oldToken, newToken)

使用 newToken 替换 token_ 。_

DOMTokenList.supports(token)

如果传入的 token 是相关属性(attribute)支持的标记,则返回 true

DOMTokenList.toggle(token [, force])

从 DOMTokenList 字符串中移除标记字串(token),并返回 false。如果传入的字串(token)不存在,则将其添加进去,并返回 trueforce 是一个可选的布尔值,如果传入 true ,且传入的 token 不存在,则将其添加进去并返回 true ,若传入的 token 存在,则直接返回 true ;反之,如果传入 false ,则移除存在的 token,并返回 false ,如 token 不存在则直接返回 false

DOMTokenList.entries()

返回一个迭代器(iterator),以遍历这个对象中的所有键值对。

DOMTokenList.forEach(callback [, thisArg])

为每个 DOMTokenList 中的元素都调用一次传入的 callback 函数。

DOMTokenList.keys()

返回一个迭代器(iterator)以遍历这个对象中所有键值对的键。

DOMTokenList.values()

返回一个迭代器(iterator)以遍历这个对象中所有键值对的值。

示例

在下面这个简单的例子中,我们使用 Element.classList 获取了 <p> 元素的 class 列表,也就是一个DOMTokenList ,再使用 DOMTokenList.add() 添加了一个 class,然后更新 <p> 元素的Node.textContent以显示这个新的 DOMTokenList

HTML

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

JavaScript

js
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;

输出类似这样:

去除空格和重复项目

修改 DOMTokenList 的方法(例如 DOMTokenList.add())会自动去除多余的空格(Whitespace)和列表中的重复项目。例如:

html
<span class="    d   d e f"></span>
js
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;

输出类似这样:

规范

Specification
DOM Standard
# interface-domtokenlist

浏览器兼容性

BCD tables only load in the browser

参见