DOMTokenList

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

プロパティ

DOMTokenList.length 読取専用
integer で、このオブジェクトに格納されているオブジェクトの数を表します。
DOMTokenList.value
文字列化プロパティであり、リストの値を DOMString で返します。

メソッド

DOMTokenList.item(index)
そのリスト内で index の位置の項目を返します。 index がそのリストの length 以上であれば undefined を返します。
DOMTokenList.contains(token)
指定された token がリストに含まれていれば true を返し、そうでなければ falseを返します。
DOMTokenList.add(token1[, token2[, ...tokenN]])
指定された token をリストに追加します。
DOMTokenList.remove(token1[, token2[, ...tokenN]])
指定された token をリストから削除します。
DOMTokenList.replace(oldToken, newToken)
既存の tokennewToken で置き換えます。
DOMTokenList.supports(token)
指定された token が、関連付けられた属性で対応しているトークンであれば true を返します。
DOMTokenList.toggle(token [, force])
もし token が存在すればリストから削除し、存在しなければ token をリストに追加します。操作後にリスト内に token が存在するかどうかを boolean で返します。
DOMTokenList.entries()
このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができる反復子を返します。
DOMTokenList.forEach(callback [, thisArg])
DOMTokenList オブジェクトの各要素に対して 1 回ずつ、指定した callback 関数を実行します。
DOMTokenList.keys()
このオブジェクト内に含まれるすべてのキーと値のペアのうちキーを反復処理することができる反復子を返します。
DOMTokenList.values()
このオブジェクト内に含まれるすべてのキーと値のペアのうち値を反復処理することができる反復子を返します。

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

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

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

そして JavaScript です。

let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;

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

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

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

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

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser