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

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
replaceChrome 完全対応 61Edge 完全対応 17Firefox 完全対応 49IE ? Opera 完全対応 48Safari 完全対応 ありWebView Android 完全対応 61Chrome Android 完全対応 61Edge Mobile 完全対応 17Firefox Android 完全対応 49Opera Android 完全対応 48Safari iOS 完全対応 ありSamsung Internet Android 未対応 なし
supports
実験的
Chrome 完全対応 49Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 完全対応 17Firefox Android 完全対応 49Opera Android 完全対応 36Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
Trimming of whitespace and removal of duplicatesChrome 完全対応 ありEdge ? Firefox 完全対応 55IE 完全対応 あり
補足
完全対応 あり
補足
補足 IE only trims whitespace — it doesn't remove duplicates.
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lengthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 50IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 50Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
valueChrome 完全対応 50
補足
完全対応 50
補足
補足 Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge ? Firefox 完全対応 ありIE ? Opera 完全対応 37
補足
完全対応 37
補足
補足 Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari 完全対応 ありWebView Android 完全対応 50
補足
完全対応 50
補足
補足 Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Chrome Android 完全対応 50
補足
完全対応 50
補足
補足 Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 37
補足
完全対応 37
補足
補足 Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
containsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
addChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
removeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
toggleChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 11Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
entriesChrome 完全対応 45Edge ? Firefox 完全対応 50IE ? Opera 完全対応 32Safari ? WebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile ? Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS ? Samsung Internet Android 完全対応 あり
forEachChrome 完全対応 45Edge 未対応 なしFirefox 完全対応 50IE ? Opera 完全対応 32Safari ? WebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile ? Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS ? Samsung Internet Android 完全対応 あり
keysChrome 完全対応 45Edge ? Firefox 完全対応 50IE ? Opera 完全対応 32Safari ? WebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile ? Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS ? Samsung Internet Android 完全対応 あり
valuesChrome 完全対応 45Edge ? Firefox 完全対応 50IE ? Opera 完全対応 32Safari ? WebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile ? Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

See Also

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

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