[TypeScript에서 DOM 다루기] - NodeList 와 HTMLCollection

조민호·2023년 10월 27일

우리가 여러 개의 요소 노드 객체를 가져올 때 사용하는

querySelectorAll() , getElementsByClassName() 같은 브라우저 메소드는

NodeList와 HTMLCollection를 반환합니다

HTMLCollection과 NodeList 둘 다 여러개의 DOM요소들을 불러들일때 반환되는 타입이며 유사 배열 객체이면서 이터러블입니다.

그러므로 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있고 반복문을 돌 수 있습니다.

for (let i = 0; i < **childNodes**.length; i++) {
      $students.removeChild(**childNodes[i]**);
}

그러나 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드는 사용할 수 없습니다. (단, NodeList는 forEach는 사용가능)

따라서 HTMLCollection과 NodeList 모두 편리하게 사용하기 위해서는 배열로 만들어줘야 합니다.

특히 HTMLCollection과 같은 live 객체는 반복문을 순회하면서 노드가 변경되는 경우, 개발자의 의도와는 다른 결과가 발생할 수 있으므로 배열로 바꾸어 사용하는 것이 바람직합니다.

대표적으로 Array.from() 을 사용해서 두 객체를 배열로 만들 수 있습니다

(익스플로러같은 구식 브라우저에는 Array.prototype.slice.call()을 사용한다고 합니다)

이제 , NodeList와 HTMLCollection에 대해 각각 알아보고 차이점에 대해서 알아 봅시다

NodeList

NodeList는

element.childNodes와 같은 프로퍼티 ( children이랑 다릅니다! )
document.querySelectorAll() 과 같은 메드에 의해 반환되는 노드의 콜렉션 입니다

속성으로는

NodeList.length

메소드로는

NodeList.item()
NodeList.forEach()
NodeList.entries()
NodeList.values()
NodeList.keys()

특징 1

NodeList 는 배열은 아니지만 forEach()를 사용하여 반복할 수 있습니다.
그러나 forEach 외의 Array.prototype에서 제공하는 map, reduce, filter 등의 메서드는 사용할 수 없습니다.

만약 배열 형태로 사용하고 싶다면 NodeList 은 **Array.from() 을 지원합니다. 그러므로 Array.from()을 사용하여 배열로 변환해서 사용 할 수도 있습니다**

<div class="row">
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat occupied"></div>
        <div class="seat occupied"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
</div>

querySelectorAll을 사용하여 NodeList 반환

document.querySelectorAll('.row .seat:not(.occupied)')

반환된 NodeList에다가 Array.from을 사용해서 배열로 변환

Array.from(document.querySelectorAll('.row .seat:not(.occupied)'))

💡 일부 브라우저는 아직NodeList.forEach() 또는 Array.from()가 작동되지 않습니다 이럴 때는 Array.prototype.forEach()를 사용하면 됩니다

특징 2

경우에 따라, NodeList는 라이브 컬렉션으로, DOM의 변경 사항을 실시간으로 컬렉션에 반영합니다.

라이브 컬렉션이란, 객체가 스스로 실시간 노드 객체의 상태 변경을 반영함을 의미합니다

Node.childNodes 라이브 컬렉션입니다

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes; **// 라이브 컬렉션 NodeList**
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div')); // add div
console.log(child_nodes.length); // should output "3"

이 외의 document.querySelectorAll() 같은 것들은 정적 NodeList를 반환합니다. DOM을 변경해도 콜렉션 내용에는 영향을 주지 않습니다.

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

특징 3

NodeList 는 추가적으로 **HTMLCollection 리스트에는 없는 HTML 노드를 포함할 수 있습니다**

<div>
  <p>Hello, World</p>
  TypeScript! **// 텍스트 노드**
</div>;

const div = document.getElementByTagName("div")[0];

div.children;
// HTMLCollection(1) [p]

div.childNodes;
// NodeList(2) [p, text]

children은 현재
Hello, World
요소만을 포함하고 있고
childNodes는 두 개의 p 노드가 아닌 text 노드를 포함하고 있습니다.

NodeList에서 text 부분은 **"TypeScript!" 텍스트를 포함하는 문자 그대로의 Node입니다
HTMLCollection은 이 Node를 포함하지 않습니다. `왜냐하면 HTMLElement로 간주하지 않기 때문입니다.**`

특징 4

NodeList 는 HTMLElement 를 포함하여 다양한 유형의 노드를 포함할 수 있습니다

NodeList는 Node 인터페이스를 상속하므로 Node와 그 하위 개념인

HTMLElement, Text, Comment 등의 노드 유형을 모두 포함합니다

(HTML 상속 그래프를 보시면 이해가 갈 겁니다)

따라서 NodeList 타입은 단지 여러 개의 노드를 포함하는 컬렉션을 나타내며,

이 컬렉션은 다양한 유형의 노드를 포함할 수 있습니다.

예를 들어서 , querySelectorAll()로 여러 요소 노드를 가져옵니다

그렇다면 이건 NodeList형태 이지만 사실 우리는 이 리스트의 내용들이

HTML요소인 것을 확신하고 있습니다

그러므로 HTMLElement[ ] 타입으로 캐스팅이 가능한 것입니다

<circle cx="140" cy="70" r="20" class="figure-part" />
<!-- Body -->
<line x1="140" y1="90" x2="140" y2="150" class="figure-part" />
<!-- Arms -->
<line x1="140" y1="120" x2="120" y2="100" class="figure-part" />
<line x1="140" y1="120" x2="160" y2="100" class="figure-part" />
<!-- Legs -->
<line x1="140" y1="150" x2="120" y2="180" class="figure-part" />
<line x1="140" y1="150" x2="160" y2="180" class="figure-part" />

const hangman = Array.from(document.querySelectorAll('.figure-part')) as HTMLElement[];

HTMLCollection

HTMLCollection는

element.children 와 같은 속성(property) 💡 childNodes는 NodeList , children은 HTMLCollection 입니다!
getElementsByClassName(), getElementsByTagname() 메소드에 의해 반환됩니다

속성으로는

HTMLCollection.length

메소드로는

HTMLCollection.item()
HTMLCollection.namedItem()

HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다.

그렇지만 유사배열 형태 이므로
forEach 메소드 , Array.prototype에서 제공하는 map, reduce, filter 등의 메소드들을 **사용할 수 없습니다**

특징 1

HTMLCollection는 유사배열 형태이고 NodeList와 달리 forEach조차 사용할 수 없습니다

그렇지만 이 역시 Array.from() 메소드를 사용해서 배열로 변환해서
사용이 가능합니다

<div id="app">
      <h1>test</h1>
      <div class="greeting">Hello</div>
      <div class="greeting">Hello</div>
      <div class="greeting">Hello</div>
</div>

const greeting = document.getElementsByClassName('greeting');
console.log(Array.from(greeting));

특징 2

HTMLCollection은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 라이브 컬렉션 객체입니다.

<div id="app">
      <h1>test</h1>
      <div class="greeting">Hello</div>
</div>

const app = document.getElementById('app');
const greeting = document.getElementsByClassName('greeting');

// HTMLCollection [div.greeting] 1
console.log(greeting, greeting.length);

app.insertAdjacentHTML('beforeend', '<div class="greeting">Hello</div>');

// HTMLCollection(2) [div.greeting, div.greeting] 2
console.log(greeting, greeting.length);