[JavaScript_error] 01. HTMLCollection는 forEach, filter 등을 사용 불가.

🟡 HTMLCollection는 forEach, filter 등을 사용 불가.

 - JS로 HTML 요소를 불러오고 싶을 때 document.getElementsBy~~ 함수를 사용해서 가져올 것입니다. 이때 가져온 element들은 HTMLCollection객체 형태로 가져오는데, 배열에 담겨 오길래 당연히 map, filter, forEach가 되는 줄 알았으나 되지 않습니다.

let checkboxList = document.getElementsByClassName('allDelete');

가져온 element들

 

 

	Array	HTMLCollection
형태
filter 함수
forEach 함수

 

 - 위 표에서 보시는 것처럼 HTMLCollection은 filter, forEach 등 Array에서 기본적으로 제공해주는 함수를 제공하지 않고 있습니다. 그래서 HTMLCollection의 요소들을 순회하는 방법은 여러 가지가 있지만 3가지 방법을 소개하겠습니다.

 

🟣 1. for문으로 요소 순회하기

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

 

🟣 2. Array.prototype에 바인딩하기

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

 

🟣 3. HTMLCollection.prototype에 함수 직접 생성

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

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

 

 

🎈 Array 같이 생겼다고 다 같은 Array가 아니었다는 걸 다시 한번 알게 됐다....