Bagaimana untuk Mengelakkan Elemen Tambahan Apabila Menggelung Melalui Item Terpilih dengan document.querySelectorAll?

Menggelung Melalui Elemen Terpilih dengan document.querySelectorAll

Masalah:
Apabila cuba menggelung elemen yang dipilih menggunakan document.querySelectorAll, output termasuk item tambahan yang tidak berkaitan.

Contoh:

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

Output:

<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()

Masalah timbul kerana document.querySelectorAll mengembalikan NodeList, iaitu objek seperti tatasusunan. Walau bagaimanapun, NodeList tidak menyokong kaedah tatasusunan seperti forEach.

Penyelesaian:

Untuk menggelungkan elemen yang dipilih dengan betul, tukar NodeList kepada tatasusunan. Terdapat beberapa cara untuk melakukan ini:

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. Menggelung pada indeks nod:

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i < checkboxes.length; i++) {
     // Do something with each checkbox
   }

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Elemen Tambahan Apabila Menggelung Melalui Item Terpilih dengan document.querySelectorAll?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!