getElementsByClassName 리턴값 질문

아하 dom event를 handling을 할때는 querySelectorAll을 이용해야 하는군요. 그러면 getElementsByClassName은 주로 어디서 사용하는지 답변 부탁드립니다.

getElementsByClassName은 HTMLCollection을 반환하고, HTMLCollection은 노드의 상태 변화를 실시간으로 감지하기 때문에, 이후에 추가되거나 변경된 노드들도 모두 감지합니다. 노드의 상태 변화를 실시간으로 감지하길 원하고 class이름으로 요소들을 찾고싶을때 주로getElementsByClassName을 사용합니다.

아래는 HTMLCollection과 NodeList의 차이를 볼 수 있는 예제 코드입니다.

const elm = document.getElementById("today-info");
const elm1 = document.getElementsByClassName("date"); //HTMLCollection
const elm2 = document.querySelectorAll("div.date"); //NodeList

console.log(elm1); //HTMLCollection은 아래에 추가된 새로운  div 감지 후 출력
console.log(elm2); //NodeList는 아래에 추가된 새로운 div를 감지하지 못함

const newElm = document.createElement("div");
newElm.classList.add("date");
elm.appendChild(newElm);

HTMLCollection은 forEach 메서드를 제공하지 않기 때문에 보통 배열로 변경 후 forEach메서드를 사용합니다.

const dateElm= document.getElementsByClassName("date");

Array.from(dateElm).forEach((elm) => {
  //HTMLCollection을 배열로 변경 후 forEach사용
  console.log(elm);
});

네 만약 api를 호출해 받아온 데이터를 동일한 class 이름으로 바로 추가하게 된다면 추가된 요소들까지 바로 감지 할 수 있을 것 같습니다.

예제코드를 가지고 비교하면서 설명해주셔서 정말로 감사드립니다.