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