NodeList
NodeList는 element.childNodes와 같은 속성이나 document.querySelectorAll()과 같은 메소드에 의해 반환되는 Node Collection이다. NodeList는 마치 Array와 비슷하게 생겼지만 배열과는 다르다. 우리는 배열과 같은 형태를 하고 있지만 배열이 아닌 객체들을 유사 배열이라고 부른다.
NodeList는 배열이 아니기 때문에 배열에 사용 가능한 메소드를 대부분 사용할 수 없다. 그렇기 때문에 NodeList에 배열 메소드를 사용하기 위해서는 NodeList를 실제 배열로 변환하는 등의 방법을 사용해야 한다.
(최신 브라우저에서는 NodeList에 forEach()와 같은 메소드를 지원하고 있다.)
중요한 점은 대개의 경우 NodeList는 라이브(Live) 콜렉션으로 DOM의 변경 사항을 실시간으로 반영한다. 그러나 document.querySelectorAll() 메소드에 의해 반환되는 NodeList는 정적(Static) 콜렉션으로 DOM의 변경 사항이 실시간으로 반영되지 않는다.
HTMLCollection
HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션을 나타내며 NodeList와 마찬가지로 유사 배열이다. HTMLCollection은 현대적인 DOM의 이전 세대부터 존재하던 구성요소로 element.children과 같은 속성 또는
document.getElementsByClassName(), document.getElementsByTagName()과 같은 메소드에 의해 반환된다. HTMLCollection은 모두 문서가 바뀔 때 실시간으로 업데이트되는 라이브(Live) 콜렉션이다.
출처: https://im-developer.tistory.com/110 [Code Playground]
댓글