NodeList.prototype.forEach()

NodeList 인터페이스의 forEach() 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다.

문법Syntax

NodeList.forEach(callback[, thisArg]);

Parameters

callback

각각의 요소에 대해 실행하는 함수로, 3개의 인수(arguments)를 갖습니다:

currentValue: NodeList에서 처리중인 현재 요소(element)입니다.
currentIndex: NodeList에서 처리중인 현재 요소의 인덱스입니다.
listObj: forEach() 가 적용되고 있는 NodeList 객체입니다.

thisArg Optional

callback 을 실행할 때 this 에 대입할 값입니다.

Return value

undefined.

Exceptions

None.

Example

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 를 지원하는 모든 브라우저에서 동작합니다:

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;
}

The above behavior is how many browsers actually implement NodeList.prototype.forEach (Chrome, for example).

Specifications

Specification	Status	Comment
Web IDL The definition of 'forEach' in that specification.	Candidate Recommendation	Defines `forEach` on `iterable` declarations

Browser Compatibility

BCD tables only load in the browser