[240430 TIL] HTMLCollection, NodeList

오늘은 HTMLCollection, NodeList에 대해서 알아보았습니다.

 

querySelectorAll 이나 getElementsByClassName 등으로 dom 유사배열객체를 찾아왔을 경우

배열이라고 생각해서 배열메서드를 사용했는데 안되는 경우가 있었습니다.

 

HTMLCollection

HTMLCollection은 getElementsBy~ 와 같은 메서드에 의해 찾아진 유사배열객체입니다.

HTMLCollection의 경우 Array.prototype 에 정의된 메서드들을 바로 쓸 수 없습니다.

사용하려면 간단히 배열로 변환해서 쓰면 됩니다.

//Array.from 사용하기
let collection = document.getElementsByClassName('some-class');
let elementsArray = Array.from(collection);

elementsArray.map(element => {
  console.log(element); // 각 요소에 대해 작업 수행
});

//spread 문법 사용하기
let collection = document.getElementsByClassName('some-class');
let elementsArray = [...collection];

elementsArray.map(element => {
  console.log(element); // 각 요소에 대해 작업 수행
});

 

NodeList

NodeList는 querySelectorAll 에 의해서 찾아진 유사배열객체입니다.

NodeList는 HTMLCollection과 다르게 배열메서드 중 forEach 는 지원합니다.

하지만 다른 배열메서드는 사용할 수 없습니다.

배열로 변환하는 방법은 HTMLCollection과 같습니다.

 

 

차이점

HTMLCollection과 NodeList는 모두 DOM (Document Object Model)에서

사용되는 유사 배열 객체이지만, 주요 차이점이 몇 가지 있습니다. 

 

1. 포함하는 노드의 타입

HTMLCollection: 이 객체는 HTML 요소만 포함합니다. 주로 document.getElementsByClassName() 또는 document.getElementsByTagName() 같은 메소드를 통해 반환됩니다. HTMLCollection은 오직 Element 노드만을 포함합니다.

 

NodeList: 이 객체는 모든 종류의 노드 (예: 요소 노드, 텍스트 노드, 주석 노드 등)를 포함할 수 있습니다. NodeList는 document.querySelectorAll() 또는 childNodes 속성을 통해 반환되는데, 이러한 메소드나 속성은 Element 뿐만 아니라 텍스트 노드 등 다른 타입의 노드도 포함할 수 있습니다.

2. 동적 vs 정적(중요)

HTMLCollection: 대부분의 경우 동적입니다. 즉, DOM의 변경 사항이 HTMLCollection에 실시간으로 반영됩니다. 예를 들어, 문서에서 요소가 추가되거나 제거되면, HTMLCollection도 자동으로 업데이트됩니다.

 

NodeList: NodeList는 생성 방법에 따라 동적일 수도 있고 정적일 수도 있습니다. childNodes와 같은 속성으로 생성된 NodeList는 동적이며, DOM의 변경이 반영됩니다. 그러나 document.querySelectorAll()로 생성된 NodeList는 정적입니다. 즉, 생성된 시점의 DOM 상태를 반영하며, 이후 DOM의 변경 사항이 NodeList에 반영되지 않습니다.

 

3. 메소드 지원

HTMLCollection: HTMLCollection은 몇몇 특정 메소드를 제공하지 않습니다. 일반적으로 인덱스를 통한 접근과 length 속성을 통해 요소의 수를 확인할 수 있습니다.

 

NodeList: NodeList는 forEach() 메소드를 기본적으로 지원하여, 각 노드에 대해 반복 작업을 수행할 수 있게 합니다. 그러나 배열의 다른 메소드는 기본적으로 지원하지 않습니다.