☑︎ Prologue

JavaScript 기초 공부를 위해 그림판 만들기(from NomadCoders)를 하던중 그중에 색상
팔레트를 만드는 과정에서 강의를 잠시 멈추고 혼자 해보는 시간을 갖었었다.

금방 짜고 잘 작동되는것을 보고 뿌듯!
그것도 잠시 남은 강의 영상을 보던 나는 몰랐던 사실을 알고 혼란스러웠다.😱

☑︎ Before

const nodeList = document.querySelectorAll(".list");
const htmlCollection = document.getElementsByClassName("list");

아직 초보인 나는 이 두가지에 대해서 Node 라 읽고 배열로 기억했다.

하지만 배열과는 전혀 다른 NodeList 와 HTMLCollection 이라는 것이고
배열과는 다른 듯 하지만 비슷한 '유사 배열' 이라는 것

☑︎ Description

✔️ NodeList from MDN more

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

✔️ HTMLCollection from MDN more

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

MDN 에서는 이렇게 정의 하고 있다. 정석적인 설명은 다른 곳에도 많으니
정말 간단히 쉽게 설명 하면, 두가지 다 유사 배열이기 때문에 배열에 적용할수 있는
Method가 제한이 된다. (어떤 것인지는 MDN 이나 console.log 로 확인해 보면 된다.)

✔️ Live, Static Collection

• 대체로 NodeList 가 Live Collection 으로 DOM 의 변경사항을 실시간으로 반영하지만
  qeurySelectorAll 으로 반환한 NodeList 는 Static Collection 으로 실시간으로
  반영하지 않는다. 즉, 중간에 append 로 DOM을 추가해도 반영하지 않는다.
• HTMLCollection Live Collection 으로 문서의 변경사항이 실시간으로 반영된다.
  
  

☑︎ How use?

그렇다면 여러 Methdos 를 사용하고 싶은데 어떻게 해야하냐?
생각보다 답은 간단하다. Array.from() 사용 해 배열로 바꾸어주면 된다.

htmlCollection.forEach(list => list.addEventListener("click", argu);
// 뭐야 왜 안돼!! 왜 forEach 를 사용 못하는거야?! (nodeList는 가능)
   
Array.from(htmlCollection).forEach(list => list.addEventListener("click", argu);
// 아 이제 진짜 배열로 바꾸니까 잘되는구나                                  

console.log 로도 확인 해 보았다.