Dalam JavaScript, “ querySelectorAll() ” metode mengambil elemen pertama yang sama persis dengan pemilih CSS yang ditentukan. Metode ini mulai melintasi pohon DOM untuk melakukan tugas ini. Setelah elemen ditemukan, ia menerapkan properti atau metode bawaan JavaScript yang ditentukan di bagian skrip untuk melakukan tugas khusus. Metode ini biasanya digunakan untuk memilih elemen yang ditargetkan sesuai kebutuhan. Ini memungkinkan pengguna untuk memilih semua elemen yang cocok dengan pemilih yang ditentukan atau elemen tertentu yang ditempatkan pada indeks yang diberikan.
Panduan ini mengilustrasikan penggunaan metode “querySelectorAll()” dalam JavaScript.
Bagaimana Cara Menggunakan Metode “querySelectorAll()” di JavaScript?
Untuk menggunakan “ querySelectorAll() ”, tentukan pemilih CSS sebagai argumennya. Pemilih CSS termasuk 'Jenis, Kelas, dan id'. Jika pemilih CSS tidak valid, ia mengembalikan kesalahan sintaksis, jika tidak, ia mengembalikan objek statis NodeList sebagai output standarnya.
Sintaksis
document.querySelectorAll ( pemilih CSS )
Dalam sintaks di atas, ' pemilih CSS ” lihat semua pemilih CSS yang valid.
Mari gunakan sintaks yang ditentukan di atas secara praktis.
Kode HTML
Ikhtisar kode HTML yang diberikan:
< h2 kelas = 'demo' > Tajuk pertama h2 >< h3 kelas = 'demo' > Tajuk kedua h3 >
< P kelas = 'demo' > Paragraf pertama P >
< P kelas = 'demo' > Paragraf kedua P >
< tombol onclick = 'jsFunc()' > Klik disini ! tombol >
Pada baris kode di atas:
- “ ” menambahkan subjudul yang memiliki kelas 'demo'.
- “ ” tag mendefinisikan subjudul kedua dengan kelas yang sama bernama “demo”.
- “ ” tag menyematkan pernyataan paragraf yang memiliki kelas yang sama yaitu, “demo”.
- “
” tag menyertakan tombol baru dengan event mouse “onclick” untuk menjalankan fungsi “jsFunc()”.
Catatan: Kode HTML tertentu diikuti di seluruh panduan ini.
Contoh 1: Menerapkan Metode “querySelectorAll()” untuk Memilih Elemen yang Memiliki Kelas yang Sama dan Mengubah Warnanya
Contoh ini menggunakan metode “querySelectorAll()” untuk memilih semua elemen yang menggunakan kelas “demo”.
Kode JavaScript
Mari ikhtisar kode yang disebutkan di bawah ini:
< naskah >fungsi jsFunc ( ) {
daftar const = document.querySelectorAll ( '.demo' ) ;
untuk ( membiarkan saya = 0 ; Saya < daftar.panjang; saya++ ) {
daftar [ Saya ] .gaya.warna = 'oranger' ;
}
}
naskah >
Pada baris kode di atas:
- “ jsFunc() ” fungsi didefinisikan.
- Dalam definisinya, variabel 'daftar' menggunakan ' querySelectorAll() ” metode untuk memilih semua elemen yang memiliki kelas 'demo'.
- Selanjutnya, “ untuk ” loop menginisialisasi daftar simpul untuk mengulangi semua elemen HTML yang ditemukan yang memiliki kelas “ demo ” dan ubah warna teksnya menggunakan tombol “ gaya. warna ' Properti.
Keluaran
Pada keluaran di atas, dapat dilihat bahwa warna teks dari elemen yang terdiri dari nama kelas yang sama yaitu, 'demo' diubah setelah tombol diklik.
Contoh 2: Menerapkan Metode “querySelectorAll()” untuk Memilih Elemen Terindeks Tertentu
Terlepas dari semua elemen, pengguna juga dapat memilih elemen terindeks tertentu yang memiliki kelas 'demo'.
Kode JavaScript
Pertimbangkan kode JavaScript yang diberikan:
< naskah >fungsi jsFunc ( ) {
daftar const = document.querySelectorAll ( 'h2.demo' ) ;
daftar [ 0 ] .gaya.warna = 'hijau' ;
}
naskah >
Dalam cuplikan kode di atas:
- Variabel “daftar” memilih elemen “h2” yang kelasnya adalah “demo” dengan bantuan tombol “ querySelectorAll() ' metode.
- Setelah itu, variabel “list” menentukan indeks elemen “h2” untuk mengubah warna teks elemen “H2” yang ditempatkan pada indeks “0”.
Keluaran
Keluaran menunjukkan bahwa warna teks dari elemen 'H2' yang ditempatkan pada indeks nol memiliki kelas 'demo' yang berubah setelah tombol diklik.
Contoh 3: Menerapkan Metode “querySelectorAll()” untuk Mendapatkan Jumlah Elemen yang Memiliki Kelas yang Sama
Contoh ini mengambil jumlah elemen yang memiliki kelas yang sama dengan menggunakan metode “querySelectorAll()”.
Kode HTML
Pertama, lihat kode HTML yang dimodifikasi dari 'Contoh 1':
< P pengenal = 'untuk' > P >
Dalam kode HTML yang disebutkan di atas, tambahkan paragraf kosong dengan id 'para' di akhir kode HTML 'Contoh 1'.
Kode JavaScript
Sekarang, lanjutkan dengan kode JavaScript:
< naskah >fungsi jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'untuk' ) .innerHTML = nodelist.panjang;
}
naskah >
Menurut potongan kode di atas:
- Fungsi “jsFunc()” pertama-tama memilih semua elemen “
” menggunakan “ querySelectorAll() ' metode.
- Setelah itu, “ getElementById() ” Metode mengakses paragraf kosong yang ditambahkan melalui id 'para' untuk menambahkannya dengan nilai yang dikembalikan dari properti 'panjang' yang diterapkan.
Keluaran
Seperti yang terlihat, output di atas menunjukkan total '4' elemen yang cocok dengan 'demo' pemilih kelas CSS yang ditentukan.
Kesimpulan
“ querySelectorAll() ” dapat digunakan dengan mudah dengan menentukan pemilih CSS sebagai nilainya. Metode ini cocok dengan setiap elemen HTML dan memilih elemen yang cocok dengan pemilih yang ditentukan. Setelah elemen dipilih, ia melakukan tugas yang diperlukan pada elemen yang ditentukan di bagian skrip. Panduan ini mengilustrasikan secara singkat penggunaan metode “querySelectorAll()” dalam JavaScript.