DOMTokenList

DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList , HTMLLinkElement.relList , HTMLAnchorElement.relList , HTMLAreaElement.relList , HTMLIframeElement.sandbox ,或 HTMLOutputElement.htmlFor . It is indexed beginning with 0 as with JavaScript Array 对象。 DOMTokenList is always case-sensitive.

特性

DOMTokenList.length 只读
Is an integer representing the number of objects stored in the object.
DOMTokenList.value
A stringifier property that returns the value of the list as a DOMString .

方法

DOMTokenList.item( index )
Returns the item in the list by its index ,或 undefined if index is greater than or equal to the list's length .
DOMTokenList.contains( token )
返回 true if the list contains the given token , otherwise false .
DOMTokenList.add( token1 [, token2 [, ... tokenN ]])
Adds the specified token (s) to the list.
DOMTokenList.remove( token1 [, token2 [, ... tokenN ]])
Removes the specified token (s) from the list.
DOMTokenList.replace( oldToken , newToken )
替换 token with newToken .
DOMTokenList.supports( token )
返回 true if a given token is in the associated attribute's supported tokens.
DOMTokenList.toggle( token [, force ])
移除 token from the list if it exists, or adds token to the list if it doesn't. Returns a boolean indicating whether token is in the list after the operation.
DOMTokenList.entries()
Returns an iterator , allowing you to go through all key/value pairs contained in this object.
DOMTokenList.forEach( callback [, thisArg ])
Executes a provided callback function once per DOMTokenList 元素。
DOMTokenList.keys()
Returns an iterator , allowing you to go through all keys of the key/value pairs contained in this object.
DOMTokenList.values()
Returns an iterator , allowing you to go through all values of the key/value pairs contained in this object.

范例

In the following simple example, we retrieve the list of classes set on a <p> element as a DOMTokenList 使用 Element.classList , add a class using DOMTokenList.add() , and then update the Node.textContent of the <p> to equal the DOMTokenList .

First, the HTML:

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

Now the JavaScript:

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

输出看起来像这样:

Trimming of whitespace and removal of duplicates

Methods that modify the DOMTokenList (譬如 DOMTokenList.add() ) automatically trim any excess Whitespace and remove duplicate values from the list. For example:

<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}"`;
					

输出看起来像这样:

规范

规范 状态 Comment
DOM
The definition of 'DOMTokenList' in that specification.
实时标准 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
DOMTokenList Chrome 1 Edge 12 Firefox 3 IE 10 Opera 11.5 Safari 5.1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 11.5 Safari iOS 5.1 Samsung Internet Android 1.0
add Chrome 1 Edge 12 Firefox Yes IE 10 Opera Yes Safari 5.1 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS 5.1 Samsung Internet Android Yes
contains Chrome 1 Edge 12 Firefox Yes IE 10 Opera Yes Safari 5.1 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS 5.1 Samsung Internet Android Yes
entries Chrome 45 Edge ≤79 Firefox 50 IE No Opera 32 Safari 10 WebView Android 45 Chrome Android 45 Firefox Android 50 Opera Android 32 Safari iOS 10 Samsung Internet Android 5.0
forEach Chrome 45 Edge 16 Firefox 50 IE No Opera 32 Safari 10 WebView Android 45 Chrome Android 45 Firefox Android 50 Opera Android 32 Safari iOS 10 Samsung Internet Android 5.0
item Chrome 1 Edge 12 Firefox Yes IE 10 Opera Yes Safari 5.1 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS 5.1 Samsung Internet Android Yes
keys Chrome 45 Edge ≤79 Firefox 50 IE No Opera 32 Safari 10 WebView Android 45 Chrome Android 45 Firefox Android 50 Opera Android 32 Safari iOS 10 Samsung Internet Android 5.0
length Chrome 1 Edge 12 Firefox 50 IE 10 Opera Yes Safari 5.1 WebView Android Yes Chrome Android Yes Firefox Android 50 Opera Android Yes Safari iOS 5.1 Samsung Internet Android Yes
remove Chrome 1 Edge 12 Firefox Yes IE 10 Opera Yes Safari 5.1 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS 5.1 Samsung Internet Android Yes
Trimming of whitespace and removal of duplicates Chrome Yes Edge 部分支持 12
部分支持 12
Before Edge 79, DOMTokenList trims whitespace but doesn't remove duplicates.
Firefox 55 IE 部分支持 Partial
部分支持 Partial
DOMTokenList trims whitespace but doesn't remove duplicates.
Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 55 Opera Android Yes Safari iOS 10 Samsung Internet Android Yes
replace Chrome 61 Edge 17 Firefox 49 IE No Opera 48 Safari 10.1 WebView Android 61 Chrome Android 61 Firefox Android 49 Opera Android 45 Safari iOS 10.3 Samsung Internet Android 8.0
supports
Chrome 49 Edge 17 Firefox 49 IE No Opera 36 Safari 10 WebView Android 49 Chrome Android 49 Firefox Android 49 Opera Android 36 Safari iOS 10 Samsung Internet Android 5.0
toggle Chrome 1 Edge 12 Firefox Yes IE 11 Opera Yes Safari 5.1 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS 5.1 Samsung Internet Android Yes
value Chrome 50
50
Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList 接口。
Edge ≤18 Firefox Yes IE No Opera 37
37
Before Opera 37, this property was part of the deprecated child DOMSettableTokenList 接口。
Safari 10 WebView Android 50
50
Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList 接口。
Chrome Android 50
50
Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList 接口。
Firefox Android Yes Opera Android 37
37
Before Opera 37, this property was part of the deprecated child DOMSettableTokenList 接口。
Safari iOS 10 Samsung Internet Android 5.0
5.0
Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList 接口。
values Chrome 45 Edge ≤79 Firefox 50 IE No Opera 32 Safari 10 WebView Android 45 Chrome Android 45 Firefox Android 50 Opera Android 32 Safari iOS 10 Samsung Internet Android 5.0

图例

完整支持
完整支持
部分支持
部分支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。