DOMTokenList

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DOMTokenListChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 10Opera 完全対応 11.5Safari 完全対応 5.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
addChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
containsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
entriesChrome 完全対応 45Edge 完全対応 ≤79Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
forEachChrome 完全対応 45Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
keysChrome 完全対応 45Edge 完全対応 ≤79Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
lengthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 50IE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 50Opera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
removeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
Trimming of whitespace and removal of duplicatesChrome 完全対応 ありEdge 部分対応 12
補足
部分対応 12
補足
補足 Before Edge 79, DOMTokenList trims whitespace but doesn't remove duplicates.
Firefox 完全対応 55IE 部分対応 一部
補足
部分対応 一部
補足
補足 DOMTokenList trims whitespace but doesn't remove duplicates.
Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS 完全対応 10Samsung Internet Android 完全対応 あり
replaceChrome 完全対応 61Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 48Safari 完全対応 10.1WebView Android 完全対応 61Chrome Android 完全対応 61Firefox Android 完全対応 49Opera Android 完全対応 45Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 8.0
supports
実験的
Chrome 完全対応 49Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 36Safari 完全対応 10WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 49Opera Android 完全対応 36Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
toggleChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 11Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
valueChrome 完全対応 50
補足
完全対応 50
補足
補足 Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge 完全対応 ≤18Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 37
補足
完全対応 37
補足
補足 Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari 完全対応 10WebView 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.
Firefox Android 完全対応 ありOpera Android 完全対応 37
補足
完全対応 37
補足
補足 Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
補足
完全対応 5.0
補足
補足 Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList interface.
valuesChrome 完全対応 45Edge 完全対応 ≤79Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0

凡例

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

関連情報

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