DOMTokenList

DOMTokenList インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは Element.classList や HTMLLinkElement.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.textContent が DOMTokenList と等しくなるように更新します。

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

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

そして JavaScript です。

let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `段落の classList は "${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 は "${classes}"`;

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

仕様書

ブラウザーの互換性