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 完全対応 8Edge 完全対応 12Firefox 完全対応 3IE 完全対応 10Opera 完全対応 11.5Safari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
addChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
containsChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
entriesChrome 完全対応 42Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10.1WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
forEachChrome 完全対応 42Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10.1WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
itemChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
keysChrome 完全対応 42Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10.1WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
lengthChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 50IE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 50Opera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
removeChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
Removes duplicatesChrome 完全対応 60Edge 完全対応 17Firefox 完全対応 55IE 未対応 なしOpera 完全対応 47Safari 完全対応 10WebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android 完全対応 55Opera Android 完全対応 44Safari iOS 完全対応 10Samsung Internet Android 完全対応 8.0
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 完全対応 10.1WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 49Opera Android 完全対応 36Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
toggleChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
Trims whitespaceChrome 完全対応 48Edge 完全対応 12Firefox 完全対応 51IE 完全対応 10Opera 完全対応 35Safari 完全対応 10WebView Android 完全対応 48Chrome Android 完全対応 48Firefox Android 完全対応 51Opera Android 完全対応 35Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
valueChrome 完全対応 50
補足
完全対応 50
補足
補足 Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge 完全対応 17Firefox 完全対応 47IE 未対応 なし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 完全対応 47Opera 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 完全対応 42Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 32Safari 完全対応 10.1WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 50Opera Android 完全対応 32Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0

凡例

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

関連情報

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