この翻訳は不完全です。英語から この記事を翻訳 してください。

The 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, or HTMLOutputElement.htmlFor. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Properties

DOMTokenList.length 読取専用
Is an integer representing the number of objects stored in the object.
DOMTokenList.value
The value of the list as a DOMString.

Methods

DOMTokenList.item()
Returns an item in the list by its index (returns undefined if the number is greater than or equal to the length of the list).
DOMTokenList.contains()
Returns true if the list contains the given token, otherwise false.
DOMTokenList.add()
Adds the given token to the list.
DOMTokenList.remove()
Removes the specified token from the list.
DOMTokenList.replace()
Replaces an existing token with a new token.
DOMTokenList.supports()
Returns true if a given token is in the associated attribute's supported tokens.
DOMTokenList.toggle()
Removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.
DOMTokenList.entries()
Returns an iterator allowing you to go through all key/value pairs contained in this object.
DOMTokenList.forEach()
Executes a provided function once per DOMTokenList element.
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.

Examples

In the following simple example we retrieve the list of classes set on a <p> element as a DOMTokenList using 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:

var para = document.querySelector("p");
var classes = para.classList;
para.classList.add("d");
para.textContent = 'paragraph classList is "' + classes + '"';

The output looks like this:

Trimming of whitespace and removal of duplicates

Methods that modify the DOMTokenList (such as DOMTokenList.add()) automatically trim any excess whitespace and remove duplicate values from the list. For example:

<span class="    d   d e f"></span>
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span classList is "' + classes + '"';

The output looks like this:

Specifications

Specification Status Comment
Credential Management Level 1 草案 Adds the supports() method.
DOM
DOMTokenList の定義
現行の標準 Initial definition

Browser compatibility

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり10 あり あり
replace61 ?49 ?48 あり
supports50 ?49 なし あり ?
Trimming of whitespace and removal of duplicates あり ?55 あり1 あり あり
length あり1250 ? あり ?
value あり ? あり ? あり あり
item あり12 あり10 あり あり
contains あり12 あり10 あり あり
add あり12 あり10 あり あり
remove あり12 あり10 あり あり
toggle あり12 あり11 あり あり
entries あり ?50 ? あり ?
forEach あり なし50 ? あり ?
keys あり ?50 ? あり ?
values あり ?50 ? あり ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
replace6161 ?4948 あり なし
supports5050 ?49 あり なし5.0
Trimming of whitespace and removal of duplicates ? あり ?55 あり あり あり
length あり あり ?50 あり ? あり
value あり あり ? あり あり あり あり
item あり あり ? あり あり あり あり
contains あり あり ? あり あり あり あり
add あり あり ? あり あり あり あり
remove あり あり ? あり あり あり あり
toggle あり あり ? あり あり あり あり
entries あり あり ?50 あり ? あり
forEach あり あり ?50 あり ? あり
keys あり あり ?50 あり ? あり
values あり あり ?50 あり ? あり

1. IE only trims whitespace — it doesn't remove duplicates.

See Also

ドキュメントのタグと貢献者

 このページの貢献者: fscholz
 最終更新者: fscholz,