HTMCollection vs NodeList

HTML Collection

• HTML 문서 내에서 선택한 요소만을 ****정렬된 순서대로 모아둔 집합
• 요소를 배열의 항목처럼 유사하게 다룰 수 있는 객체이며, 이를 유사 배열 객체라고 부른다.
• for ...of문으로 순회 가능한 이터러블(iterable) 객체이기도 하다.

HTML Collection 객체를 반환

• getElementsByTagName()
• getElementsByClassName()

getElementsByName() 은 비슷하게 생겼으나 NodeList를 반환한다.

특징

• 유사 배열 객체
  • 인덱스를 통해 요소에 접근할 수 있다.
  • length를 통해 요소의 수를 확인할 수 있다.
  • 하지만 진짜 배열처럼 배열 메서드(push, pop, forEach, map, filter)를 사용할 수 없다.
  • const elimentsArray = Array.from(HTMLCollection)
  • 대신 Array.from 메서드를 이용하면 배열로 변환하여 배열 메서드를 사용할 수 있다.
• 이터러블 객체
  • const elimentsArray = [...HTMLCollection]
  • 이터러블 객체이기 때문에 스프레드 문법을 통해 배열로 만드는 방법도 있다.
• live DOM 객체

  • DOM의 변경 사항을 실시간으로 반영하는 객체이다.

  • 객체가 생성된 후에 DOM이 변경되면 객체 또한 변경된다는 것을 의미한다.

    const divs = document.getElementsByTagName("div");
    console.log(divs.length); // 현재 div 개수 출력
    
    // 새로운 div 추가
    const newDiv = document.createElement("div");
    document.body.appendChild(newDiv);
    
    console.log(divs.length); // 새 div가 추가되었으므로 값이 변경됨 (Live 특성)

  • 변경을 방지하기 위해서는 NodeList를 사용할 수도 있고, Array.from 메서드를 통해 Live 특성을 지우고 배열로 사용하는 방법도 있다.

NodeList

• 요소 객체뿐만 아니라 텍스트, 주석, 속성 등의 모든 노드를 정렬된 순서대로 모아둔 집합
• HTMLCollection과 마찬가지로 요소 배열 객체이면서 이터러블 객체이다.

NodeList 객체를 반환

• querySelectorAll()
• getElementsByName()
• Node.childNodes

특징

• 유사 배열 객체
• 이터러블 객체
• forEach 메서드 사용 가능
  • NodeList.prototype 에 forEach 메서드가 정의되어 있기 때문이다.

    일부 오래된 브라우저(IE11 이하)는 NodeList가 forEach 메서드를 지원하지 않는다.

• non-live DOM 객체

  • DOM의 변경사항을 실시간으로 반영하지 않는다.

    Node.childNodes는 위와 별개로 live DOM 객체이다.

    const divs = document.querySellectorAll("div");
    console.log(divs.length); // 현재 div 개수 출력
    
    // 새로운 div 추가
    const newDiv = document.createElement("div");
    document.body.appendChild(newDiv);
    
    console.log(divs.length); // 새 div가 추가되었으나 값이 변경되지 않음

요약

속성	NodeList (querySelectorAll)	NodeList (childNodes)	HTMLCollection
Live(동적) 여부	❌ (정적)	✅ (동적)	✅ (동적)
배열 메서드 사용 (forEach())	✅ 가능	✅ 가능	❌ 불가능
DOM 변경 반영 여부	❌ 반영 안 됨	✅ 자동 반영	✅ 자동 반영
반환 메서드	querySelectorAll()	childNodes	getElementsByTagName() 등