NodeList.prototype.forEach()

NodeList インターフェースにおける forEach() メソッドは、引数に渡されたコールバックをリストの各値のペアに対して 1 度ずつ挿入順で呼び出します。

構文

someNodeList.forEach(callback[, thisArg]);

パラメーター

callback

someNodeList の各要素に対して実行する関数で、3 つの引数を受け付けます。

currentValue
現在 someNodeList で処理されている要素です。
currentIndex 省略可
現在 someNodeList で処理されている currentValue の添字です。
listObj 省略可
forEach() を適用しようとしている someNodeList です。
thisArg 省略可
callback 内で this として使う値です。

戻り値

let node = document.createElement("div");
let kid1 = document.createElement("p");
let kid2 = document.createTextNode("hey");
let kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

let list = node.childNodes;

list.forEach(
  function(currentValue, currentIndex, listObj) {
    console.log(currentValue + ', ' + currentIndex + ', ' + this);
  },
  'myThisArg'
);

上記のコードの結果は以下のようになります。

[object HTMLParagraphElement], 0, myThisArg
[object Text], 1, myThisArg
[object HTMLSpanElement], 2, myThisArg

ポリフィル

以下の polyfill を追加することで、 ES5 をサポートする全てのブラウザで使用することができるようになります。

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

または

if (window.NodeList && !NodeList.prototype.forEach) {
   NodeList.prototype.forEach = Array.prototype.forEach;
}

多くのブラウザでは、実は上記のような方法で NodeList.prototype.forEach() を実装しています。(例えば、Chrome)

仕様

仕様書 策定状況 コメント
Web IDL
forEach の定義
勧告候補 iterable 宣言でforEach を定義。

ブラウザーの互換性

BCD tables only load in the browser

関連情報