document.querySelectorAll을 사용하여 선택한 요소 반복

문제:
선택한 요소를 반복하려고 할 때 document.querySelectorAll을 사용하면 출력에 관련 없는 추가 내용이 포함됩니다. items.

예:

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

출력:

10
item()
namedItem()

document.querySelectorAll이 배열과 유사한 객체인 NodeList를 반환하기 때문에 문제가 발생합니다. 그러나 NodeList는 forEach와 같은 배열 메서드를 지원하지 않습니다.

해결책:

선택한 요소를 적절하게 반복하려면 NodeList를 배열로 변환하세요. 이를 수행하는 방법에는 여러 가지가 있습니다:

1. Spread Syntax (ES2015 ):

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

2. Array.from():

   const divs = Array.from(document.querySelectorAll('div'));
   divs.forEach((div) => {
     // Do something with each div
   });

3. 노드 인덱스 반복:

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i