DOMTokenList

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 + '"';

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

• DOMSettableTokenList (DOMTokenList を拡張して設定可能な .value プロパティを追加したオブジェクト)