Cara Menggulung Secara Berkesan Melalui Elemen Terpilih Menggunakan document.querySelectorAll

Menggelung Melalui Elemen Terpilih dengan document.querySelectorAll

document.querySelectorAll ialah kaedah berkuasa yang membolehkan anda memilih berbilang elemen berdasarkan yang ditentukan pemilih CSS. Untuk mengulangi elemen yang dipilih ini, adalah penting untuk memahami nuansa objek NodeList yang terhasil.

NodeList vs. Array

Isu yang anda hadapi semasa menggunakan for. ..dalam gelung ialah NodeList bukan tatasusunan. Walaupun NodeList menyerupai tatasusunan, ia mempunyai sifat tambahan seperti item() dan namedItem(). Akibatnya, gelung for...in berulang pada sifat ini sebagai tambahan kepada elemen itu sendiri, membawa kepada 3 item tambahan yang anda temui.

Amalan Terbaik untuk Menggelung

Untuk mengelakkan isu dan gelung ini dengan betul, pertimbangkan pendekatan berikut:

Menggunakan Gelung For dengan Indeks

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

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

Menggunakan Gelung ForEach (ES2015)

Kaedah forEach() direka khusus untuk lelaran ke atas tatasusunan dan NodeLists. Ia memudahkan sintaks gelung, menjadikannya lebih ringkas:

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

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

Menukar NodeList kepada Array (ES2015)

Kaedah lain yang berkesan, terutamanya untuk persekitaran ES2015, adalah dengan tukar NodeList kepada tatasusunan menggunakan sintaks spread:

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

Pertimbangan Tambahan

• Untuk keserasian penyemak imbas, pastikan anda menggunakan transpiler seperti Babel.js jika perlu.
• Jika anda bekerja dengan Node.js, anda boleh memanfaatkan kaedah .map() pada NodeLists.

Atas ialah kandungan terperinci Cara Menggulung Secara Berkesan Melalui Elemen Terpilih Menggunakan document.querySelectorAll. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!