DOMTokenList インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは Element.classListHTMLLinkElement.relListHTMLAnchorElement.relListHTMLAreaElement.relList,、HTMLIframeElement.sandboxHTMLOutputElement.htmlFor 等から返されるものです。インデックスは JavaScript の Array オブジェクトのように 0 から始まります。 DOMTokenList は常に大文字と小文字を区別します。

プロパティ

DOMTokenList.length 読取専用
integer で、このオブジェクトに格納されているオブジェクトの数を表します。
DOMTokenList.value
リストの値を DOMString で表したものです。

メソッド

DOMTokenList.item()
リスト内の項目をインデックス指定で返します (数値がリストの長さ以上であれば、 undefined を返します)。
DOMTokenList.contains()
指定されたトークンがリストに含まれていれば true を返し、そうでなければ falseを返します。
DOMTokenList.add()
指定されたトークンをリストに追加します。
DOMTokenList.remove()
指定されたトークンをリストから削除します。
DOMTokenList.replace()
既存のトークンを新しいトークンで置き換えます。
DOMTokenList.supports()
指定されたトークンが、関連付けられた属性で対応しているトークンであれば true を返します。
DOMTokenList.toggle()
指定されたトークンをリストから削除して false を返します。指定されたトークンが存在しなければ、リストに追加して true を返します。
DOMTokenList.entries()
このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができる iterator を返します。
DOMTokenList.forEach()
DOMTokenList オブジェクトの各要素に対して、指定した関数を実行します。
DOMTokenList.keys()
このオブジェクト内に含まれるすべてのキーと値のペアのうちキーを反復処理することができる iterator を返します。
DOMTokenList.values()
このオブジェクト内に含まれるすべてのキーと値のペアのうち値を反復処理することができる iterator を返します。

以下の簡単な例では、 <p> 要素のクラスのリストを Element.classList を使用して DOMTokenList として受け取り、 DOMTokenList.add() を使用してクラスを1つ追加し、最後に <p>Node.textContentDOMTokenList と等しくなるように更新します。

まず、 HTML は以下のとおりです。

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

そして JavaScript です。

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

出力結果はこのようになります。

ホワイトスペースのトリミングと重複の削除

DOMTokenList を編集するメソッド (DOMTokenList.add() など) は、自動的にそのリストから余分なホワイトスペースをトリミングし、重複した値を削除します。例えば次のようになります。

<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 + '"';

出力結果はこのようになります。

仕様書

仕様書 状態 備考
DOM
DOMTokenList の定義
現行の標準 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DOMTokenListChrome 完全対応 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 未対応 なしFirefox Android 完全対応 49Opera Android 完全対応 45Safari iOS 完全対応 ありSamsung Internet Android 未対応 なし
supports
実験的
Chrome 完全対応 49Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 36Safari 完全対応 ありWebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 未対応 なしFirefox 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 完全対応 16Firefox 完全対応 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 完全対応 あり

凡例

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

関連情報

  • DOMSettableTokenList (DOMTokenList を拡張して設定可能な .value プロパティを追加したオブジェクト)

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

このページの貢献者: mdnwebdocs-bot, mfuji09, contvel, fscholz
最終更新者: mdnwebdocs-bot,