Dalam JavaScript, ' querySelectorAll() ” kaedah mendapatkan semula elemen pertama yang betul-betul sepadan dengan pemilih CSS yang ditentukan. Kaedah ini mula melintasi pokok DOM untuk melaksanakan tugas ini. Setelah elemen ditemui, ia menggunakan sifat terbina dalam JavaScript atau kaedah yang ditakrifkan dalam bahagian skrip untuk melaksanakan tugas khas. Kaedah ini biasanya digunakan untuk memilih elemen yang disasarkan mengikut keperluan. Ia membolehkan pengguna memilih semua elemen yang sepadan dengan pemilih yang ditentukan atau yang tertentu yang diletakkan pada indeks yang diberikan.
Panduan ini menggambarkan penggunaan kaedah 'querySelectorAll()' dalam JavaScript.
Bagaimana untuk Menggunakan Kaedah 'querySelectorAll()' dalam JavaScript?
Untuk menggunakan ' querySelectorAll() ”, tentukan pemilih CSS sebagai hujahnya. Pemilih CSS termasuk 'Jenis, Kelas dan id'. Jika pemilih CSS tidak sah, ia mengembalikan ralat sintaks, jika tidak, ia mengembalikan objek NodeList statik sebagai output standardnya.
Sintaks
document.querySelectorAll ( pemilih CSS )
Dalam sintaks di atas, ' pemilih CSS ” rujuk kepada semua pemilih CSS yang sah.
Mari gunakan sintaks yang ditakrifkan di atas secara praktikal.
Kod HTML
Gambaran keseluruhan kod HTML yang diberikan:
< h2 kelas = 'demo' > Tajuk pertama h2 >< h3 kelas = 'demo' > Tajuk kedua h3 >
< hlm kelas = 'demo' > Perenggan pertama hlm >
< hlm kelas = 'demo' > Perenggan kedua hlm >
< butang onclick = 'jsFunc()' > Tekan di sini ! butang >
Dalam baris kod di atas:
- ' teg ” menambah subtajuk yang mempunyai kelas “demo”.
- ' teg ” mentakrifkan subtajuk kedua dengan kelas yang sama bernama “demo”.
- ' tag ” membenamkan pernyataan perenggan yang mempunyai kelas yang sama iaitu, “demo”.
- '
tag ” termasuk butang baharu dengan acara tetikus “onclick” untuk melaksanakan fungsi “jsFunc()”.
Catatan: Kod HTML tertentu diikuti sepanjang panduan ini.
Contoh 1: Menggunakan Kaedah 'querySelectorAll()' untuk Memilih Elemen Mempunyai Kelas yang Sama dan Menukar Warnanya
Contoh ini menggunakan kaedah 'querySelectorAll()' untuk memilih semua elemen yang menggunakan kelas 'demo'.
Kod JavaScript
Mari kita tinjau kod yang dinyatakan di bawah:
< skrip >fungsi jsFunc ( ) {
senarai const = document.querySelectorAll ( '.demo' ) ;
untuk ( biarkan i = 0 ; i < senarai.panjang; i++ ) {
senarai [ i ] .style.color = 'oren' ;
}
}
skrip >
Dalam baris kod di atas:
- ' jsFunc() fungsi ” ditakrifkan.
- Dalam definisinya, pembolehubah 'senarai' menggunakan ' querySelectorAll() ' kaedah untuk memilih semua elemen yang mempunyai kelas 'demo'.
- Seterusnya, ' untuk gelung 'memulakan senarai nod untuk lelaran sepanjang semua elemen HTML yang ditemui mempunyai kelas ' demo ” dan tukar warna teks mereka menggunakan “ gaya.warna ” harta benda.
Pengeluaran
Dalam output di atas, dapat dilihat bahawa warna teks unsur-unsur yang terdiri daripada nama kelas yang sama iaitu, 'demo' ditukar apabila klik butang.
Contoh 2: Menggunakan Kaedah 'querySelectorAll()' untuk Memilih Elemen Terindeks Khusus
Selain daripada semua elemen, pengguna juga boleh memilih elemen diindeks khusus yang mempunyai kelas 'demo'.
Kod JavaScript
Pertimbangkan kod JavaScript yang diberikan:
< skrip >fungsi jsFunc ( ) {
senarai const = document.querySelectorAll ( 'h2.demo' ) ;
senarai [ 0 ] .style.color = 'hijau' ;
}
skrip >
Dalam coretan kod di atas:
- Pembolehubah 'senarai' memilih elemen 'h2' yang kelasnya adalah 'demo' dengan bantuan ' querySelectorAll() ” kaedah.
- Selepas itu, pembolehubah 'senarai' menentukan indeks elemen 'h2' untuk menukar warna teks elemen 'H2' yang diletakkan pada indeks '0'.
Pengeluaran
Output menunjukkan bahawa warna teks elemen 'H2' yang diletakkan pada indeks sifar mempunyai 'demo' kelas ditukar apabila klik butang.
Contoh 3: Menggunakan Kaedah 'querySelectorAll()' untuk Mendapatkan Bilangan Elemen Mempunyai Kelas yang Sama
Contoh ini mendapatkan semula bilangan elemen yang mempunyai kelas yang sama menggunakan kaedah 'querySelectorAll()'.
Kod HTML
Mula-mula, lihat kod HTML 'Contoh 1' yang diubah suai:
< hlm ID = 'untuk' > hlm >
Dalam kod HTML yang dinyatakan di atas, tambahkan perenggan kosong dengan id 'para' di hujung kod HTML 'Contoh 1'.
Kod JavaScript
Sekarang, teruskan dengan kod JavaScript:
< skrip >fungsi jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'untuk' ) .innerHTML = nodelist.length;
}
skrip >
Mengikut coretan kod di atas:
- Fungsi 'jsFunc()' mula-mula memilih semua elemen '
' menggunakan ' querySelectorAll() ” kaedah.
- Selepas itu, ' getElementById() kaedah ” mengakses perenggan kosong yang ditambahkan melalui idnya “para” untuk menambahkannya dengan nilai yang dikembalikan bagi sifat “panjang” yang digunakan.
Pengeluaran
Seperti yang dilihat, output di atas menunjukkan sejumlah elemen '4' yang sepadan dengan 'demo' pemilih kelas CSS yang ditentukan.
Kesimpulan
' querySelectorAll() ” kaedah boleh digunakan dengan mudah dengan menentukan pemilih CSS sebagai nilainya. Kaedah ini sepadan dengan setiap elemen HTML dan memilih yang sepadan dengan pemilih yang ditentukan. Setelah elemen dipilih, ia melaksanakan tugas yang diperlukan pada mereka yang ditakrifkan dalam bahagian skrip. Panduan ini secara ringkas menggambarkan penggunaan kaedah 'querySelectorAll()' dalam JavaScript.