[Web] NodeList vs Array

NodeList와 Array 차이점

 

1. NodeList와 Array의 가장 큰 차이점은 NodeList는 JavaScript API가 아닌 browser가 제공하는 API라는 것이다.

 

DOM을 조작하기 위해 자주 사용하는 querySelectorAll()이나 getElementByTagName() 메서드는 JavaScript 메서드가 아닌 browser 메서드였다.. (그러나 JavaScript에서도 사용 가능하다. 이는 다른 스크립트 언어에서도 사용하다는 의미 !)

 

그리고 또 다른 의미에서도 Array와의 차이점이 있다.

 

2. childNodes의 NodeList는 라이브 컬렉션(동적 리스트)으로서 DOM의 변경사항을 실시간으로 반영한다. 즉, 요소를 제거하거나 DOM에 추가하면 목록이 자동으로 업데이트된다. 

 

그러나 querySelector() 나 querySelectorAll()의 NodeList는 정적 리스트로, DOM이 변경되어도 collection의 내용에는 영향을 주지 않는다.

 

 

 

정리

* 정리하자면 NodeLists는 DOM 요소에 액세스하는 언어(JS와 같은..)에 구애받지 않는 방법이며 Arrays는 요소의 Collection으로 사용하는 JavaScript 객체이다.

 

* NodeList와 Array각각 고유한 속성과 메서드가 있고, 필요한 경우에 NodeList를 Array로 변환할 수 있다. 

 

 

 

참고 자료

- https://gomakethings.com/nodelists-vs-arrays/

- https://devsoyoung.github.io/posts/js-htmlcollection-nodelist

- https://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9

- https://developer.mozilla.org/ko/docs/Web/API/NodeList