DOM

インターフェイス

DOMTokenList インターフェイス

→● MS

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

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

プロパティ

DOMTokenList.length 読取専用 ●

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

DOMTokenList.value

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

メソッド

DOMTokenList.item() ●
DOMTokenList[index]

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

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 class="a b c"></p>

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

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

<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}"`;

テスト