NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll 와 같은 메서드에 의해 반환되는  노드의 콜렉션입니다.

NodeListArray 는 아니지만, forEach() 를 사용하여 반복할 수 있습니다. 또한 Array.from() 을 사용하여 Array 로 변환 할 수도 있습니다.

그러나 일부 오래된 브라우저는 아직NodeList.forEach() 또는 Array.from() 를 구현하지 않았습니다. 이것은 Array.prototype.forEach() 를 사용하여 회피할 수 있습니다. — 이 문서의 예제를 참조하세요.

경우에 따라, NodeList는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, Node.childNodes 는 실시간입니다:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // should output "3"

다른 경우 NodeList는 정적 콜렉션입니다. DOM을 변경해도 콜렉션 내용에는 영향을 주지 않습니다. document.querySelectorAll() 은 정적 NodeList를 반환합니다.

NodeList의 항목(items)을 순회(iterate)하거나, 특히 리스트의 길이를 캐시(cache)해야 할 때, 이 구분울 유지하는것이 좋습니다.

속성(Properties)

NodeList.length
NodeList의 노드의 개수를 반환합니다.

메서드(Methods)

NodeList.item()
리스트 내 항목(item)의 인덱스를 반환하고, 인덱스가 범위 외의 경우일 땐 null을 반환합니다.
nodeList[idx]의 대안으로 사용할 수 있습니다.(i 가범위를 벗어날 때(out-of-bounds) undefined 를 반환합니다.) 이것은 비 자바스크립트 언어 DOM 구현에 유용합니다.
NodeList.entries()
iterator 를 반환하여 코드가 콜렉션에 포함된 모든 키/값 쌍을 순회할 수 있도록 합니다. (이 경우 키는 0부터 시작하는 숫자이고, 값은 노드가 됩니다.)
NodeList.forEach()
NodeList의 요소(element)마다 한 번씩, 인자로 전달 받은 함수를 실행하여 요소를 인수(argument)로 함수에 전달합니다.
NodeList.keys()
iterator를 반환하여 콜렉션에 포함된 키/값 쌍의 모든 키를 코드가 순회하도록 합니다. (이 경우 키는 0부터 시작하는 숫자입니다.)
NodeList.values()
콜렉션에 포함된 키/값 쌍의 모든 값(nodes)을 코드가 순회할 수 있게 해주는 iterator를 반환합니다.

Example

for 루프를 사용하여 NodeList의 항목을 반복할 수 있습니다.

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
}

리스트의 항목(items)을 열거하기 위해 for...in 또는 for each...in를 사용하지 않길 바랍니다. NodeList의 길이와 항목 속성까지 열거합니다. 또한 스크립트가 요소(element) 객체만 처리한다고 가정하면 오류가 발생할 수 있습니다. 게다가, for..in은 고정된 순서로 각 속성들을 접근한다는 보장이 없습니다.

for...of 루프는 NodeList 객체를 올바르게 반복합니다.

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

최신 브라우저는 반복자(iterator) 메서드인 forEach()만이 아니라, entries()values(), keys() 까지도 지원합니다.

인터넷 익스플로러의 호환을 위해서는 Array.prototype.forEach 를 사용하는 방법도 있습니다.

var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
  item.checked = true;
});

Array로 변환하는 법

NodeList의 컨텐츠를 Array의 메소드를 통해 다루는 것이 더 쉬울 때도 있다. 아래는 NodeList 객체를 Array로 변환하는 기법이다.

var div_list = document.querySelectorAll('div'); // returns NodeList
var div_array = Array.prototype.slice.call(div_list); // converts NodeList to Array

NodeList prototype

NodeList에 프로토타입을 추가할 수도 있다.

var elements = document.querySelectorAll(".suggestions"); 

NodeList.prototype.addEventListener = function(event, func) {
    this.forEach(function(content, item) {
       content.addEventListener(event, func);
    });
}

function log() {
    console.log(this, " was clicked");
}

elements.addEventListener("click", log);
//or
elements.addEventListener("click", function() {
    console.log(this, "  awas clicked");
});
// 클릭된 요소로부터 출력될 요소는 둘 모두 HTML 요소가 된다.

forEach에 대한 자세한 내용은 Array.prototype.forEach()를 참조하길 바란다.

명세서

Specification Status Comment
DOM
The definition of 'NodeList' in that specification.
Living Standard  
Document Object Model (DOM) Level 3 Core Specification
The definition of 'NodeList' in that specification.
Obsolete  
Document Object Model (DOM) Level 2 Core Specification
The definition of 'NodeList' in that specification.
Obsolete  
Document Object Model (DOM) Level 1 Specification
The definition of 'NodeList' in that specification.
Obsolete Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
NodeListChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
lengthChrome Full support 1Edge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
entriesChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Edge Mobile ? Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0
forEachChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Edge Mobile ? Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0
itemChrome Full support 1Edge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
keysChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Edge Mobile ? Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0
valuesChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Edge Mobile ? Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: mdnwebdocs-bot, DeadIntegral, huusz, fscholz
최종 변경자: mdnwebdocs-bot,