[TIL / JavaScript] NodeList

• element.childNodes 속성과 document.querySelectorAll 메소드에 의해 반환되는 콜렉션이다.
• 배열은 아니지만 for, for...of, forEach를 사용하여 반복할 수 있다.
• Array.from 메소드를 사용하여 배열로 변환할 수 있다.
• element.childNodes 속성에서는 DOM의 변경사항을 실시간으로 반영하는 라이브 콜렉션이다.

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // 2
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // 3

• document.querySelectorAll 메소드에서는 DOM을 변경해도 영향을 주지 않는 정적 콜렉션이다.

NodeList와 배열의 차이점

• NodeList는 브라우저가 제공하는 API로서 언어에 구애받지 않는 객체이며, 배열은 요소의 콜렉션으로 사용되는 자바스크립트 객체다.

속성

---

NodeList.length

• NodeList의 노드 개수를 반환힌다.

메소드

---

NodeList.item()

• 리스트 내 항목의 인덱스를 반환한다.

NodeList.entries()

• iterator를 반환하여 콜렉션에 포함된 모든 키, 값 쌍을 순화할 수 있도록 한다. → 키는 인덱스, 값은 노드가 된다.

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;

for(var entry of list.entries()) {
  console.log(entry);
}
/*
Array [ 0, <p> ]
Array [ 1, #text "hey" ]
Array [ 2, <span> ]
*/

NodeList.forEach()

• 요소마다 인자로 전달받은 함수에 요소를 인수로 전달하여 실행할 수 있다.

NodeList.keys()

• iterator를 반환하여 콜렉션에 포함된 키, 값 쌍의 모든 키를 순회할 수 있도록 한다.

NodeList.values()

• iterator를 반환하여 콜렉션에 포함된 키, 값 쌍의 모든 값을 순회할 수 있도록 한다.

P.S.

✍️ 처음에 배열인 줄 알고 배열 메소드를 사용했다가 동작이 안돼서 한참 애를 먹은 적이 있다😅 굳이 배열로 변환하지 않고 NodeList의 고유한 메소드를 활용할 수 있다는 것을 알게 됐다.

Reference

---

• NodeList by MDN Web docs
• NodeList vs Array by Slight Edge