JS) HTML Collection, Nodelist

공통점과 차이점

공통점: DOM nodes의 모음
차이점: 제공하는 메소드, 포함하고 있는 DOM 노드의 타입이 다름.

NodeList: 모든 타입의 노드를 다 가질수 있음.
HTML Collection: element 노드만 가질 수 있음.

HTML Collection

배열과 유사한 HTML 요소 목록. (유사배열)

getElementsByClassName, getElementsByTagName 과 같은 메소드로 반환됨.

NodeList

document.querySelectorAll()과 같은 메소드로 반환됨.

for문, for..of문 사용 가능.

HTMLCollection, Nodelist to Array

Use Array.from method

const nodelist = document.queryselectorAll('div');
const divArr = Array.from(nodelist);

Use Array.prototype.slice

const nodelist = document.querySelectorAll(‘.div’)
const divArr = Array.prototype.slice.call(nodelist)

ES6

spread 연산자 사용

const divArr = […document.querySelectorAll(‘.div’)]