[JavaScript] HTMLCollection과 NodeList

HTMLCollection, NodeList 객체의 공통점

• DOM API가 여러 개의 결과 값을 반환하기 위해 생성된 DOM 컬렉션 객체이다.
• 두 객체는 모두 "유사 배열 객체"이면서 "이터러블(iterable)"이다.

따라서 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있으며, for ...of문을 사용하여 순회할 수 있다. 또한 Array.from메서드나 spread operator(...)를 사용하여 배열로 만들 수 있다.

하지만, "유사 배열 객체"이기 때문에 자바스크립트에서 제공하는 배열 객체의 메서드는 사용할 수 없다. (ex. map, filter, reduce 등)

• 두 객체 모두 item()메서드를 사용하여 첫 번째 인자로 받는 index 값에 해당하는 요소를 반환할 수 있다.

---

1. HTMLCollection

• getElementByTagName, getElementByClassName 등의 메서드를 통해 반환된 객체
• children 프로퍼티를 통해 반환됨
  (children 프로퍼티가 반환하는 HTMLCollection에는 text 노드가 포함되지 않음)

Live-DOM 컬렉션 객체

: 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 컬렉션 객체

↪ 요소 노드의 추가나 삭제를 바로 반영해줌

---

2. NodeList

• querySelectorAll 등의 메서드를 통해 반환된 객체
• childNodes 프로퍼티를 통해 반환됨
  (childNodes 프로퍼티가 반환하는 NodeList에는 요소 노드뿐만 아니라 text 노드도 포함되어 있을 수 있음)

NON-Live DOM 컬렉션 객체

: 노드 객체의 상태 변화를 반영하지 않는 컬렉션 객체

↪ NodeList 객체의 대부분의 경우 노드 객체의 상태 변경을 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작한다.
↪ 하지만, childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작한다.

HTMLCollection과의 차이점

• NodeList는 HTMLCollection과 다르게 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
  (하지만, forEach 외의 Array.prototype에서 제공하는 map, filter, reduce 등의 메서드는 사용할 수 없음.)

---

HTMLCollection과 NodeList 모두 편리하게 사용하기 위해 배열로 만들어주어야 함.

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

※ 두 객체를 배열로 만드는 방법 (Array.from & spread operator(...))