TIL - HTMLCollection vs NodeList

📗 모던 자바스크립트 Deep Dive 내용을 바탕으로 작성하였습니다.

getElementsByClassName으로 요소를 가져와서, 태그 안에 있는 문자열들을 아래와 같은 방식으로 가져올려고 한 적이 있었는데, 이상하게 계속 에러가 떠서 결국 다른 메서드를 이용한 적이 있었다.

const $class= document.getElementsByClassName("A");
$class.forEach((ele) => {
   console.log(ele.textContent);
});

그 당시에 한참을 구글링하다가, 유사배열이라서 forEach를 사용하지 못한다는 것 까지만, 알아내고 다음을 기약하며 노션에 적어놓았었다.
그런데 오늘 getElementById, getElementsClassName, querySelector, querySelectorAll 을 깊게 이해하지 않고, 쓰고 있다는 생각이 들어 모던 자바스크립트를 읽다가, 저 부분에 대한 해결방법을 알게 되었다.

일단 먼저 HTMLCollection 과 NodeList 의 차이에 대해 알아보자!

---

✅ HTMLCollection , NodeList 공통점

HTMLCollection, NodeLists 는 둘다 유사배열객체이다. 유사 배열이기 때문에, 배열에서 제공하는 모든 메서드를 가지고 있지 않습니다.

✅ HTMLCollection , NodeList 특징

HTMLCollection

getElementsByTagName, getElementsByClassName 메서드가 반환하는 객체이다.

📌 첫번째 특징은 노드 객체의 상태 변화를 실시간으로 반영한다는 것이다.

예를 들어, class 값이 fruit인 요소 노드를 모두 탐색해서 class 이름을 red로 변경해보자.

    <li class="fruit">Apple</li>
    <li class="fruit">Banana</li>
    <li class="fruit">Orange</li>

   const $elems = document.getElementsByClassName('fruit');
   for (let i=0; i< $elems.length; i++) 
   {
     $elems[i].className = 'red'; 
   }

이렇게 구현한다면 class 이름이 변경될 것 같지만, 두번째 li 요소를 제외한 나머지 li요소들의 class 이름이 변경된다.
그 이유는 노드 객체의 상태변화를 실시간으로 반영하기 때문이다.
위의 코드를 천천히 살펴보면 먼저,
(i == 0 ) 첫번째 li요소의 값은 'red'로 변경된다.
(i == 1 ) 그럼 첫번째 요소의 class 이름이 red로 변경되기 때문에,
첫번째 요소는 객체에서 제거된다. 그래서 인덱스 값이 변경되게 되고, 원래는
두번째 요소인 Banana의 class 이름이 변경되어야 하지만, 첫번째 요소가 삭제되면서, 두번째 요소가 첫번째 요소로 변경되고, 세번째 요소가 두번째 요소로 변경되면서, 세번째 요소인 Orange의 class 이름이 변경된다.
(i == 2) Apple, Orange의 class 이름이 변경되면서, $elems 안에는 Banana 요소만 들어있다. $elems.length < i 가 되면서, for문은 종료된다.

📌 두번째 특징은 유사 배열 객체이기 때문에 일부 배열 메서드만 사용 가능하다.

내가 위에서 언급한 이유를 찾지못한 에러의 원인이기도 하다.

const $class= document.getElementsByClassName("A");
$class.forEach((ele) => {
   console.log(ele.textContent);
});

나는 $class 를 배열 메서드 forEach를 바로 사용할려고 했지만, $class 는 유사 배열 객체이고, 일부 배열 메서드는 사용가능하지만, HTMLCollection 객체의 경우에는 forEach 메서드를 사용할 수 없었던 것이다. 그럼 해결 방법은 무엇일까?

1. Array Destructuring 사용

const $class= document.getElementsByClassName("A");
[...$class].forEach((ele) => {
   console.log(ele.textContent);
});

2. Array.from 사용

const $class= document.getElementsByClassName("A");
Array.from($class).forEach((ele) => {
   console.log(ele.textContent);
});

NodeList

querySelectorAll 메서드가 반환하는 객체이다.

📌 첫번째 특징은 실시간으로 노드 객체의 상태 변경을 반영하지 않는다.

📌 두번째 특징은 HTMLCollection 처럼 유사 배열 객체이기 때문에 일부 배열 메서드만 사용 가능하다.

단 차이점은 HTMLCollection은 forEach 메서드를 변경없이 바로 사용할 수 없었지만, NodeList는 변경없이 바로 사용할 수있다.
나머지는 위에서 설명한 HTMLCollectionc처럼 두가지 방법으로 NodeList 객체를 배열로 변환 후 배열 메서드들을 사용할 수 있다.

---

🔥 마지막으로 HTMLCollection과 NodeList 객체는 예상과 다르게 동작할때가 많기 때문에, 노드 객체의 상태 변경과 상관없이 안전하게 사용하기 위해 객체를 배열로 변환하여 사용하는 것을 권장한다고 한다.