NodeList랑 HTMLCollection

childNodes랑 children은 다르다

childNodes

현재 요소의 자식 노드가 포함된 NodeList를 반환
이때 반환되는 NodeList에는 요소 노드뿐만 아니라
주석 노드와 같은 비 요소 노드를 포함

children

현재 요소의 자식 요소가 포함된 HTMLCollection을 반환
비 요소 노드는 모두 제외

NodeList랑 HTMLCollection

NodeList

NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll 와 같은 메서드에 의해 반환되는 노드의 콜렉션

htmlcollection

HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된
일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며
리스트에서 선택할 때 필요한 메서드와 속성을 제공

유사점

1. 유사배열
2. map, filter, reduce 메소드 사용 불가, 새로운 배열로 만들어 줘야 함

차이점

1. 반환 주체가 다르다
2. NodeList는 forEach()메소드를 가지고 있다
3. Index로만 접근할 수 있는 NodeList와 다르게,
   HTMLCollection은 name, ID, index 등의 항목으로 접근 가능

HTMlCollection에서 forEach()메소드는 조금 다르게 사용 가능

• const boxArray = [...document.getElementsByClassName('box')];

• const boxes = Array.from(document.getElementsByClassName('box'));

• var boxes = Array.prototype.slice.call(document.getElementsByClassName('box'));
  var boxes = [].slice.call(document.getElementsByClassName('box'));

• const boxes = document.getElementsByClassName('box');
  const boxArray = [];

  for (let i = 0; i < boxes.length; i++) {
  console.log(boxes[i]);
  }

map,filter, reduce

NodeList랑 HTMLCollection 둘 다 유사배열
map,filter, reduce 메소드는 사용 불가
HTMLCollection을 forEach()메소드 사용 방법처럼
바꿔서 사용 가능

동적콜렉션과 정적콜렉션

HTMlCollection, NodeList는 라이브 콜렉션으로,
DOM의 변경 사항을 실시간으로 콜렉션에 반영,
그런데 NodeLlist를 반환하는 querySelectorAll는 정적콜렉션

HTMLCollection(동적) 코드 보기
querySelectorAll(정적) 코드 보기

그런데 NodeList랑 HTMLCollection을 DOM콜렉션이라 부르는데
DOM콜렉션에는 ClassList라는 애가 하나 더 있다...