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)

仕様

Specification
DOM Standard
# interface-nodelist

ブラウザーの互換性

BCD tables only load in the browser

関連情報