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
# interface-domtokenlist

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMTokenList
[Symbol.iterator]
add
Multiple parameters for add()
contains
entries
forEach
item
keys
length
remove
Multiple parameters for remove()
Removes duplicates
replace
return()'s value is a boolean, not void as it used to be.
supports
toString
toggle
force parameter
Trims whitespace
value
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见