DOMTokenList: entries() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年10月⁩.

entries() は DOMTokenList インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキー/値の組を処理することができるイテレーターを返します。値は [キー, 値] の組を持つ配列 (Array) であり、それぞれが単一のトークンを表します。

次の例では、 <span> 要素に設定されたクラスのリストを DOMTokenList として受け取るのに Element.classList を使用しています。 entries() を使用してキー/値の組を含むイテレーターを取得してから、 for...of ループを使用してそれぞれを反復処理し、それを <span> の Node.textContent に書き込みます。

最初に HTML です。

html

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

そして JavaScript です。

const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.entries();

for (const value of iterator) {
  span.textContent += `(${value})`;
}

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