HTMLCollection VS NodeList

Posted on Edited on In

정리 이유

HTMLCollection 객체와 NodeList 객체를 배열로 변환해서 사용하는 이유를 기억하기 위해

결론

노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection 객체나 NodeList 객체 모두 배열로 변환하여 사용하는 것을 권장한다.
둘 모두 유사 배열 객체이면서 이터러블이므로 스프레드 문법이나 Array.from 메서드를 사용하면 간단히 배열로 변환할 수 있다.

HTMLCollection

  • DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체
  • 언제나 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는(live) 객체이다.
  • getElementsByTagName, getElementByClassName 메서드가 반환
  • 유사 배열 객체이면서 이터러블이다.
  • 따라서 HTMLCollection 객체를 배열로 변환하면 부작용을 발생시키지 않고, 유용한 배열의 고차함수들을 사용할 수 있다.

NodeList

  • DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체
  • 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다.
  • querySelectorAll 메서드가 반환하는 경우, non-live 객체로 동작한다.
  • Node.prototype.childNodes 노드 탐색 프로터티가 반환하는 경우,
  • NodeList 객체는 NodeList.prototype.forEach, item, entries, keys, values 등의 메서드를 상속받아 사용할 수 있다.