230601) 선택자와 prototype 그리고 배열메소드

html 요소 중 일부 클래스를 불러와, 그 내부에 있는 text가 input값과 동일할 경우 해당 리스트를 보여줘야 하는 상황이었는데, 계속하여 type에러가 발생하는 상황이었다.

 

문제는 선택자의 속성과 메소드의 속성이 맞지 않는 것이 원인이었다!

 

 

1. 선택자와 prototype

 

document.getElementsByClassName() = prototype이 htmlCollector로 설정되어 나옴

document.querySelectorAll() = prototype이 nodelist로 설정되어 나옴

 

For each, filter, map 등의 배열메소드는 말 그대로 '배열'에 사용 가능함.

따라서 위 선택자들로 요소를 선택하고, 위의 메소드를 사용하려고 하는 경우에는 타입에러가 발생하게 됨.

 

해결법은?!

 

1. 배열로 만든다

2. 배열 전개방식으로 펼친 뒤 사용한다

ex) [...선택된요소].filter()

 

참고로 2를 사용하여 빠르게 해결하였다!

오늘도 잘 해냈다!