DOMTokenList
インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは Element.classList
、 HTMLLinkElement.relList
、 HTMLAnchorElement.relList
、 HTMLAreaElement.relList
,、HTMLIframeElement.sandbox
、 HTMLOutputElement.htmlFor
等から返されるものです。インデックスは JavaScript の Array
オブジェクトのように 0
から始まります。 DOMTokenList
は常に大文字と小文字を区別します。
プロパティ
DOMTokenList.length
読取専用integer
で、このオブジェクトに格納されているオブジェクトの数を表します。DOMTokenList.value
- リストの値を
DOMString
で表したものです。
メソッド
DOMTokenList.item()
- リスト内の項目をインデックス指定で返します (数値がリストの長さ以上であれば、
undefined
を返します)。 DOMTokenList.contains()
- 指定されたトークンがリストに含まれていれば
true
を返し、そうでなければfalse
を返します。 DOMTokenList.add()
- 指定されたトークンをリストに追加します。
DOMTokenList.remove()
- 指定されたトークンをリストから削除します。
DOMTokenList.replace()
- 既存のトークンを新しいトークンで置き換えます。
DOMTokenList.supports()
- 指定されたトークンが、関連付けられた属性で対応しているトークンであれば
true
を返します。 DOMTokenList.toggle()
- 指定されたトークンをリストから削除して
false
を返します。指定されたトークンが存在しなければ、リストに追加してtrue
を返します。 DOMTokenList.entries()
- このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができる
iterator
を返します。 DOMTokenList.forEach()
DOMTokenList
オブジェクトの各要素に対して、指定した関数を実行します。DOMTokenList.keys()
- このオブジェクト内に含まれるすべてのキーと値のペアのうちキーを反復処理することができる
iterator
を返します。 DOMTokenList.values()
- このオブジェクト内に含まれるすべてのキーと値のペアのうち値を反復処理することができる
iterator
を返します。
例
以下の簡単な例では、 <p>
要素のクラスのリストを Element.classList
を使用して DOMTokenList
として受け取り、 DOMTokenList.add()
を使用してクラスを1つ追加し、最後に <p>
の Node.textContent
が DOMTokenList
と等しくなるように更新します。
まず、 HTML は以下のとおりです。
<p class="a b c"></p>
そして JavaScript です。
var para = document.querySelector("p");
var classes = para.classList;
para.classList.add("d");
para.textContent = 'paragraph classList is "' + classes + '"';
出力結果はこのようになります。
ホワイトスペースのトリミングと重複の削除
DOMTokenList
を編集するメソッド (DOMTokenList.add()
など) は、自動的にそのリストから余分なホワイトスペースをトリミングし、重複した値を削除します。例えば次のようになります。
<span class=" d d e f"></span>
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span classList is "' + classes + '"';
出力結果はこのようになります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
DOM DOMTokenList の定義 |
現行の標準 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
DOMSettableTokenList
(DOMTokenList
を拡張して設定可能な .value プロパティを追加したオブジェクト)