NodeList.prototype.forEach()
NodeList
인터페이스의 forEach()
메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다.
문법Syntax
js
NodeList.forEach(callback[, thisArg]);
Parameters
callback
-
각각의 요소에 대해 실행하는 함수로, 3개의 인수(arguments)를 갖습니다:_
currentValue
_ : NodeList에서 처리중인 현재 요소(element)입니다.currentIndex
-
NodeList에서 처리중인 현재 요소의 인덱스입니다.
listObj
-
forEach()
가 적용되고 있는 NodeList 객체입니다.
thisArg
Optional-
callback
을 실행할 때this
에 대입할 값입니다.
Return value
Exceptions
None.
Example
js
var node = document.createElement("div");
var kid1 = document.createElement("p");
var kid2 = document.createTextNode("hey");
var kid3 = document.createElement("span");
node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);
var 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
이 polyfill 은 ES5 를 지원하는 모든 브라우저에서 동작합니다:
js
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);
}
};
}
또는
js
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
The above behavior is how many browsers actually implement NodeList.prototype.forEach (Chrome, for example).
명세서
Specification |
---|
DOM Standard # interface-nodelist |
브라우저 호환성
BCD tables only load in the browser