DOMTokenList | Web API

在此页

特性
方法
范例
Trimming of whitespace and removal of duplicates
规范
浏览器兼容性
相关话题

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 数组 对象。 DOMTokenList is always case-sensitive.

特性

DOMTokenList.length 只读: 是 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 ，否则 false .
DOMTokenList.add( token1 [, token2 [, ... tokenN ]]): Adds the specified token (s) to the list.
DOMTokenList.remove( token1 [, token2 [, ... tokenN ]]): 移除指定 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(): 返回 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(): 返回 iterator , allowing you to go through all keys of the key/value pairs contained in this object.
DOMTokenList.values(): 返回 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 的 <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}"`;

输出看起来像这样：

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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
`包含`	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` 接口。
`值`	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

图例

完整支持
部分支持
不支持
实验。期望将来行为有所改变。

元数据

最后修改： Jan 17, 2020

DOM (文档对象模型)
DOMTokenList
特性
1. length
方法
1. add()
2. contains()
3. entries()
4. forEach()
5. item()
6. keys()
7. remove()
8. replace()
9. supports()
10. toggle()
11. value
12. values()
DOM 相关页面

在此页

特性

方法

范例

Trimming of whitespace and removal of duplicates

规范

浏览器兼容性

图例

相关话题