자바스크립트 메서드 getElementsByClassName 메서드를 사용해서 같은 클래스를 가진 여러 요소의 목록을 순회하고자 했다. 그러자 코드에 빨간 줄이 쳐지면서 크롬 화면에 아래와 같은 설명이 나타났다.
찾아보니 getElements라는 이름에서 알 수 있듯이 이 메서드는 어떤 목록을 반환하는데, 그게 바로 HTMLCollection이다. HTMLCollection은 배열과 유사하며 .length 같은 속성도 갖고 있지만, 정확히는 배열은 아니다.
여기서 HTMLCollection에 대해 for...in문을 사용하게 되면 오브젝트의 모든 iterable한 속성에 대해 반복을 수행한다. 그런데 HTMLcollection에는 내가 원하는 것이 아니지만 iterable한 속성들이 존재하므로 too heavyweight 라는 에러 메세지를 띄우는 것이다.
콘솔창에 HTMLCollection을 찍어보면 이렇게나 많은 속성이 뜨는데, 한 화면에 다 캡쳐하지 못했을 뿐 이만큼의 2배가 넘는 속성을 HTMLCollection 내의 각 요소가 갖고 있다..! too heavy라고 할만하다.
따라서 코드를 아래와 같이 수정하는 게 좋다.
const selectedItems = document.getElementsByClassName('selected');
Array.from(selectedItems).forEach(selectedItem => {
...
});여기서 Array.from() 메서드는 유사 배열 객체(HTMLcollection 같은)나 iterable한 객체를 얕게 복사해서 새로운 배열 객체를 만드는 역할을 한다. 이후 이렇게 만들어진 배열에 forEach() 메서드를 이용해서 배열의 각 요소를 순회하도록 한 뒤 필요한 코드를 작성하면 된다.
참고한 글
- no-restricted-syntax 에러
https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements - getElementsByClassName
https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByClassName - HTMLCollection
https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection
