Bagaimana untuk Cekap Gelung Melalui Elemen Terpilih Menggunakan document.querySelectorAll?

Gelung Melalui Elemen Terpilih dengan Document.querySelectorAll Pendekatan Berkesan

document.querySelectorAll menawarkan cara yang berkesan untuk memilih berbilang elemen berdasarkan kriteria yang ditentukan. Walau bagaimanapun, pembangun sering menghadapi cabaran apabila ia datang untuk mengulang elemen yang dipilih dengan cekap.

Apabila menggunakan gelung untuk..dalam konvensional, adalah penting untuk mengetahui bahawa objek yang dikembalikan termasuk tiga sifat tambahan: item() , bernamaItem(), dan panjang. Untuk mengelakkan kemasukan yang tidak diingini dalam gelung anda, pertimbangkan untuk menggunakan pendekatan yang lebih berkesan.

Teknik Gelung Alternatif

Untuk memastikan pengalaman gelung yang lebih tepat, pertimbangkan teknik alternatif berikut:

• forEach with Spread Syntax: Dengan menukarkan objek NodeList yang dikembalikan oleh document.querySelectorAll kepada tatasusunan menggunakan sintaks spread, anda boleh menggunakan kaedah forEach dengan mudah untuk mengulang setiap elemen.

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

• Array.from(): Sebagai alternatif, anda boleh menggunakan kaedah Array.from() untuk mencipta tatasusunan baharu daripada NodeList.

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

Teknik ini memberikan pengalaman gelung yang lebih halus, menghapuskan sifat yang tidak diperlukan dan membolehkan anda menumpukan pada berinteraksi dengan elemen yang dipilih itu sendiri.

Atas ialah kandungan terperinci Bagaimana untuk Cekap Gelung Melalui Elemen Terpilih Menggunakan document.querySelectorAll?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!