NodeList객체는 element.childNodes 속성 및 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]의 대안으로 사용할 수 있다. (nodeList[idx]idx 가 범위를 벗어날 땐 undefined 를 반환한다.)
NodeList.entries()
이 객체에 포함된 모든 키/값 쌍을 순회하며 처리할 수 있는 iterator 를 반환한다.
NodeList.forEach()
NodeList의 요소마다 한 번씩, 인자로 전달 받은 함수를 실행한다.
NodeList.keys()
객체에 포함된 키/값 쌍의 모든 키(key)를 처리할 수 있는 iterator를 반환한다.
NodeList.values()
객체에 포함된 키/값 쌍의 모든 값(value)을 처리할 수 있는 iterator를 반환한다.

Example

다음을 사용하여 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 AndroidiOS SafariSamsung Internet
Basic supportChrome 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 ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung 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 ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung 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

문서 태그 및 공헌자

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