DOMTokenList

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(oldTokennewToken)
使用 newToken 替换 token 。
DOMTokenList.supports(token)
如果传入的 token 是相关属性(attribute)支持的标记,则返回 true 。
DOMTokenList.toggle(token [, force])
从 DOMTokenList 字符串中移除标记字串(token),并返回 false。如果传入的字串(token)不存在,则将其添加进去,并返回 true 。force 是一个可选的布尔值,如果传入 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:

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

JavaScript:

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

输出类似这样:

去除空格和重复项目

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

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

输出类似这样:

规范

规范 状态 注释
DOM
DOMTokenList
Living Standard Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DOMTokenListChrome Full support 8Edge Full support 12Firefox Full support 3IE Full support 10Opera Full support 11.5Safari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
addChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
containsChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
entriesChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
forEachChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
itemChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
keysChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
lengthChrome Full support 8Edge Full support 12Firefox Full support 50IE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 50Opera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
removeChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
Removes duplicatesChrome Full support 60Edge Full support 17Firefox Full support 55IE No support NoOpera Full support 47Safari Full support 10WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 55Opera Android Full support 44Safari iOS Full support 10Samsung Internet Android Full support 8.0
replaceChrome Full support 61Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 48Safari Full support 10.1WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 49Opera Android Full support 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0
supports
Experimental
Chrome Full support 49Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 49Opera Android Full support 36Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
toggleChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
Trims whitespaceChrome Full support 48Edge Full support 12Firefox Full support 51IE Full support 10Opera Full support 35Safari Full support 10WebView Android Full support 48Chrome Android Full support 48Firefox Android Full support 51Opera Android Full support 35Safari iOS Full support 10Samsung Internet Android Full support 5.0
valueChrome Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge Full support 17Firefox Full support 47IE No support NoOpera Full support 37
Notes
Full support 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari Full support 10WebView Android Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Chrome Android Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Firefox Android Full support 47Opera Android Full support 37
Notes
Full support 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS Full support 10Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList interface.
valuesChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

相关链接