유사 array(Nodelist, HTMLCollection)와 array

문제점

종종 querySelectorAll를 통해 반환되는 결과값에 array method를 실행시키려 하면 오류가 나는 경우가 있다.
이것은 반환되는 값이 array가 아닌, array와 유사한 Nodelist 인 경우였다.

NodeList와 Array의 차이

• NodeList는 JavaScript API가 아닌 browser가 제공하는 API임
• childNodes의 NodeList는 라이브 컬렉션(동적 리스트)으로서 DOM의 변경사항을 실시간으로 반영됨. 즉, 요소를 제거하거나 DOM에 추가하면 목록이 자동으로 업데이트됨
• 그러나, querySelector() 나 querySelectorAll()의 NodeList는 정적 리스트로, DOM이 변경되어도 collection의 내용에는 영향을 주지 않음
• NodeList와 Array각각 고유한 속성과 메서드가 있고, 필요한 경우에 NodeList를 Array로 변환할 수 있음

참고링크 1
참고링크 2