DOMTokenList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DOMTokenList インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは Element.classListHTMLLinkElement.relList など、数多くのものから返されるものです。

DOMTokenList の添字は JavaScript の Array オブジェクトのように 0 から始まります。 DOMTokenList は常に大文字と小文字を区別します。

インスタンスプロパティ

DOMTokenList.length 読取専用

整数で、このオブジェクトに格納されているオブジェクトの数を表します。

DOMTokenList.value

文字列化プロパティであり、リストの値を文字列で返します。

インスタンスメソッド

DOMTokenList.item()

そのリスト内で指定された位置の項目を返します。指定された位置がそのリストの length 以上であれば null を返します。

DOMTokenList.contains()

指定されたトークンがリストに含まれていれば true を返し、そうでなければ falseを返します。

DOMTokenList.add()

指定されたトークンをリストに追加します。

DOMTokenList.remove()

指定されたトークンをリストから削除します。

DOMTokenList.replace()

そのトークンを別なトークンで置き換えます。

DOMTokenList.supports()

指定されたトークンが、関連付けられた属性で対応しているトークンであれば true を返します。

DOMTokenList.toggle()

もしそのトークンが存在すればリストから削除し、存在しなければそのトークンをリストに追加します。操作後にリスト内にそのトークンが存在するかどうかを論理値で返します。

DOMTokenList.entries()

このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができるイテレーターを返します。

DOMTokenList.forEach()

DOMTokenList オブジェクトの各要素に対して 1 回ずつ、指定したコールバック関数を実行します。

DOMTokenList.keys()

このオブジェクト内に含まれるすべてのキーと値のペアのうち、キーを反復処理することができるイテレーターを返します。

DOMTokenList.values()

このオブジェクト内に含まれるすべてのキーと値のペアのうち、値を反復処理することができるイテレーターを返します。

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

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

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

そして JavaScript です。

js
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `段落の classList は "${classes}"`;

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

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

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

html
<span class="    d   d e f"></span>
js
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span の classList は "${classes}"`;

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

仕様書

Specification
DOM
# interface-domtokenlist

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMTokenList
[Symbol.iterator]
add
Multiple parameters for add()
contains
entries
forEach
item
keys
length
remove
Multiple parameters for remove()
Removes duplicates
replace
return()'s value is a boolean, not void as it used to be.
supports
toString
toggle
force parameter
Trims whitespace
value
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.