[JavaScript] NodeList란?

오늘은 NodeList에 대해 알아보겠습니다.

 

목차

 

[ NodeList ]

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

 

 

※ 참고: NodeList가 Array는 아니지만, 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를 반환합니다.

 

[ 속성 (Properties) ]

📌 NodeList.length

 

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

 

[ 메서드 (Methods) ]

📌 NodeList.item()

 

리스트 내 항목(item)의 인덱스를 반환하고, 인덱스가 범위 외의 경우일 땐 null을 반환합니다.

 

nodeList [idx]의 대안으로 사용할 수 있습니다. ( i가 범위를 벗어날 때(out-of-bounds)  undefined를 반환합니다. ) 

 

 

📌 NodeList.entries() 

 

iterator를 반환하여 코드가 컬렉션에 포함된 모든 키/값 쌍을 순회할 수 있도록 합니다. ( 이 경우 키는 0부터 시작하는 숫자이고, 값은 노드가 됩니다. ) 

 

 

📌 NodeList.keys()

 

iterator를 반환하여 콜렉션에 포함된 키/값 쌍의 모든 키를 코드가 순회하도록 합니다. (이 경우 키는 0부터 시작하는 숫자입니다.)

 

 

 

📌 NodeList.values()

 

콜렉션에 포함된 키/값 쌍의 모든 값(nodes)을 코드가 순회할 수 있게 해주는 iterator를 반환합니다. 

 

 

※ Ref: https://developer.mozilla.org/ko/docs/Web/API/NodeList