document.querySelectorAll을 사용하여 선택한 요소를 효과적으로 반복하는 방법

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

document.querySelectorAll은 지정된 요소를 기반으로 여러 요소를 선택할 수 있는 강력한 방법입니다. CSS 선택기. 선택한 요소를 반복하려면 결과 NodeList 객체의 미묘한 차이를 이해하는 것이 중요합니다.

NodeList 대 Array

for를 사용할 때 직면한 문제. ..in 루프는 NodeList가 배열이 아니라는 것입니다. NodeList는 배열과 유사하지만 item() 및 명명된Item()과 같은 추가 속성을 가지고 있습니다. 결과적으로 for...in 루프는 요소 자체 외에도 이러한 속성을 반복하여 추가로 3개의 항목을 얻게 됩니다.

루핑 모범 사례

이 문제를 방지하고 올바르게 루프하려면 다음 접근 방식을 고려하세요.

인덱스와 함께 For 루프 사용

<code class="javascript">var checkboxes = document.querySelectorAll(".check");

for (var i = 0; i < checkboxes.length; i++) {
  // Do something with checkboxes[i]
}</code>

ForEach 루프 사용 (ES2015)

forEach() 메서드는 배열과 NodeList를 반복하기 위해 특별히 설계되었습니다. 루핑 구문을 단순화하여 더욱 간결하게 만듭니다.

<code class="javascript">var checkboxes = document.querySelectorAll(".check");

checkboxes.forEach(function(checkbox) {
  // Do something with checkbox
});</code>

NodeList를 배열로 변환(ES2015)

특히 ES2015 환경에 대한 또 다른 효과적인 방법은 다음과 같습니다. 스프레드 구문을 사용하여 NodeList를 배열로 변환합니다.

<code class="javascript">var div_list = document.querySelectorAll("div"); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array

div_array.forEach(function(div) {
  // Do something with div
});</code>

추가 고려 사항

• 브라우저 호환성을 위해 다음과 같은 경우 Babel.js와 같은 트랜스파일러를 사용해야 합니다. 필요합니다.
• Node.js로 작업하는 경우 NodeLists에서 .map() 메서드를 활용할 수 있습니다.

위 내용은 document.querySelectorAll을 사용하여 선택한 요소를 효과적으로 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!