MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

NodeList객체는 element.childNodes 속성 및 document.querySelectorAll 메서드에 의해 반환되는 노드의 컬렉션이다.

경우에 따라, NodeList는 라이브 컬렉션으로, DOM의 변경 사항을 실시간으로 컬렉션에 반영한다. 예를 들어, element.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)

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.
Recommendation  
Document Object Model (DOM) Level 2 Core Specification
The definition of 'NodeList' in that specification.
Recommendation  
Document Object Model (DOM) Level 1 Specification
The definition of 'NodeList' in that specification.
Recommendation Initial definition.

 

브라우저 호환성

데스크탑

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
entries()keys()values()forEach() 51 No support 50 (50) No support 38 10 (maybe prior)

모바일

Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
entries()keys()values()forEach() ? ? ? 50.0 (50) ? No support ? 10 (maybe prior) 51

문서 태그 및 공헌자

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