DOMTokenList.forEach()

forEach()DOMTokenList インターフェイスのメソッドで、リスト中のそれぞれの値の組に対して挿入順で 1 回ずつ、引数で渡されたコールバックを呼び出します。

構文

tokenList.forEach(callback [, thisArg]);

引数

callback
それぞれの要素に対して呼び出す関数で、 3 つの引数を取ります。
currentValue
配列内で処理中の現在の要素です。
currentIndex
配列内で処理中の現在の要素の位置です。
listObj
forEach() を実行中の配列です。
thisArg 省略可
callback を実行する際に this として使用する値です。

返値

undefined.

次の例では、 <span> 要素に設定されたクラスのリストを DOMTokenList として受け取るのに Element.classList を使用しています。 forEach() を使用して値を含む反復子を取得し、それぞれの値を <span>Node.textContentforEach() の中の関数から書き込みます。

HTML

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

JavaScript

let span = document.querySelector("span");
let classes = span.classList;
let iterator = classes.values();

classes.forEach(
  function(value, key, listObj) {
    span.textContent += `${value} ${key}/${this}  ++  `;
  },
  "arg"
);

結果

ポリフィル

このポリフィルは、 ES5 に対応しているすべてのブラウザーに互換性を追加します。

if (window.DOMTokenList && !DOMTokenList.prototype.forEach) {
  DOMTokenList.prototype.forEach = function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}

仕様書

仕様書 状態 備考
DOM
forEach() (as iterable<Node>) の定義
現行の標準 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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