[ JavaScript ] HTMLCollection 은 forEach가 안된다?

작업을 할 때 HTML 요소를 불러 

console.log를 찍어보면 배열 형태 안에 담겨있어서

당연하게도 배열의 모든 메소드를 사용할 수 있을거라고 생각했는데, 

 

어째 사용이 안됩니다！?

 

자세히 보니 HTMLCollection.prototype에 배열 메서드가 없습니다. 

 

그렇다면 어떻게 순회하면서 원하는 작업을 할 수 있을까？

 

방법 1) for문으로 순회하기

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

 

방법 2) for..of 문으로 순회하기 (for..in 은 안됩니다)

최근 브라우저들에서는 nodeList 나 HTMLCollection과 같은 노드리스트의 for..of를 지원한다고 합니다. 

var list = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}

 

방법 3) Array.prototype에 바인딩하기

Array.prototype.forEach.call(checkboxList,(element) => {
    console.log(element.className);
})

 

방법 4) Array.from  사용하기

Array.from(document.getElementsByClassName("events")).forEach(function(item) {
   console.log(item.id);
});

 

방법 5) HTMLCollection.prototype에 함수 직접 생성해서 추가하기

HTMLCollection.prototype.forEach = Array.prototype.forEach;

checkboxList.forEach((element) =>{
    console.log(element.className);
})

---

참고한 게시물

https://daily-life-of-bigone.tistory.com/23

https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements (읽어보길 추천드립니다！)