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}"`;
出力結果はこのようになります。
仕様書
Specification |
---|
DOM Standard # interface-domtokenlist |
ブラウザーの互換性
BCD tables only load in the browser