NodeList

안녕하세요. 오늘은 NodeList에 대해 알아봅시다.

---

NodeList

웹 문서에서 추출한 노드의 집합이며 HTMLCollection 객체와 거의 비슷하다. 즉, 배열은 아니나 배열처럼 Index를 통해서 각 노드에 접근이 가능하다. Index는 배열과 동일하게 0부터 시작한다. 모든 브라우저는 childNodes 속성에 대해 NodeList 객체를 반환하며 대부분의 브라우저는 querySelectorAll () 메서드에 대해 NodeList 객체를 반환한다.

---

그렇다면 NodeList는 배열의 기능을 할 수 있을까?

NodeList 객체는 Array는 아니지만 forEach()를 사용하여 반복할 수 있다. 하지만 배열의 map이나 filter, find 등의 여러 가지 기능은 사용하지는 못 한다. 이때 Array.from()을 사용하여 Array로 변환을 해서 배열의 기능을 사용할 수 있다.

---

NodeList 메서드

• NodeList.item() : 리스트 내 항목의 index를 반환
• NodeList.entries() : iterator를 반환하여 컬렉션에 포함된 모든 키, 값 쌍을 순회할 수 있도록 함. 여기서 키는 index이며 값은 node가 된다.
• NodeList.forEach() : 요소마다 인자로 전달받은 함수에 요소를 인수로 전달해 실행한다.
• NodeList.values() : iterator를 반환하여 키, 값 쌍의 모든 값을 순회
• NodeList.keys() : iterator를 반환하여 키, 값 쌍의 모든 키를 순회

---

Array.from() 사용

Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 복사해 새로운 Array 객체를 만든다.

1.
Array.from('청춘고양이');
//["청","춘","고","양","이"]

2. querySelectorAll을 배열로 만들 수 있다.
let counters = Array.from(window.document.querySelectorAll('count'));

---

단순 NodeList의 내용을 순회하는 경우 우리는 Array.from()을 사용할 필요는 없다. 하지만 querySelectorAll의 내용을 변경해주어야 할 때 우리는 필연적으로 Array.from()을 사용해 filter나 map 등 배열의 기능을 사용해주어야 한다.