--- title: DOMTokenList.forEach() slug: Web/API/DOMTokenList/forEach tags: - DOM - DOMTokenList - Iterable - Method - Reference - Web - forEach translation_of: Web/API/DOMTokenList/forEach ---

{{APIRef("DOM")}}

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

構文

tokenList.forEach(callback [, thisArg]);

引数

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

返値

{{jsxref('undefined')}}.

例

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

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"
);

結果

{{ EmbedLiveSample('Example', '100%', 60) }}

ポリフィル

この{{Glossary("Polyfill","ポリフィル")}}は、 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);
    }
  };
}

仕様書

仕様書 状態 備考
{{SpecName('DOM WHATWG','#domtokenlist','forEach() (as iterable<Node>)')}} {{Spec2('DOM WHATWG')}} 初回定義

ブラウザーの互換性

{{Compat("api.DOMTokenList.forEach")}}

関連情報