document.querySelectorAll을 사용하여 선택한 항목을 반복할 때 추가 요소를 방지하는 방법은 무엇입니까?

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

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

예:

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

출력:

<input id="check-1" class="check" type="checkbox" name="check">
<input id="check-2" class="check" type="checkbox" name="check">
<input id="check-3" class="check" type="checkbox" name="check">
<input id="check-4" class="check" type="checkbox" name="check">
<input id="check-5" class="check" type="checkbox" name="check">
<input id="check-6" class="check" type="checkbox" name="check">
<input id="check-7" class="check" type="checkbox" name="check">
<input id="check-8" class="check" type="checkbox" name="check">
<input id="check-9" class="check" type="checkbox" name="check">
<input id="check-10" class="check" type="checkbox" name="check" checked="">

10
item()
namedItem()

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

해결책:

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

1. 확산 구문(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 < checkboxes.length; i++) {
     // Do something with each checkbox
   }

위 내용은 document.querySelectorAll을 사용하여 선택한 항목을 반복할 때 추가 요소를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!