인프런 커뮤니티 질문&답변
작성한 질문수
getElementsByClassName 리턴값 질문
해결된 질문
작성
·
643
·
수정됨
1
querySelectorAll은 nodelist를 리턴값으로 받아서 Foreach로 선언해서 해당 dom을 event handling 한다고 배웠는데 getElementsByClassName도 querySelectorAll과 같이nodelist를 리턴 받아 forEach형태로 event handling을 할 수 있는 지 답변 부탁드립니다.
답변 2
1
안녕하세요 HK님
우선 좋은 질문 감사합니다!!
querySelectorAll은 NodeList를 반환하고 getElementsByClassName은 HtmlCollection을 반환합니다.
본 강의는 입문자용 강의이기 때문에 이 둘의 차이에 대해서는 깊게 다루지 않았는데요,
쉽게 설명하자면 HTMLCollection은 노드의 상태 변화를 실시간으로 감지하지만, NodeList는 노드를의 변경을 실시간으로 감지하지 않는다는 차이점이있습니다.
HTMLCollection은 item(), namedItem()이라는 두 가지 메서드를 제공하고, NodeList는 item(), forEach(), keys() 등의 여러가지 메서드들을 제공합니다.
querySelectorAll은 NodeList를 반환하기 때문에 forEach 메서드를 통해 요소들을 핸들링할 수 있고, getElementsByClassName은 HTMLCollection을 반환하기 때문에 forEach 메서드가 제공되지 않아 해당 메서드를 사용할 수 없습니다.
NodeList와 HTMLCollection에 대한 자세한 내용은 아래의 사이트를 참고하면 더 쉽게 이해하실 수 있을 것 같습니다 :)
- NodeList : https://developer.mozilla.org/ko/docs/Web/API/NodeList
- HTMLCollection : https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection
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);
});
아하 dom event를 handling을 할때는 querySelectorAll을 이용해야 하는군요. 그러면 getElementsByClassName은 주로 어디서 사용하는지 답변 부탁드립니다.