NodeList.prototype.forEach()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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