Tutorial ini akan menjelaskan prosedur untuk menemukan elemen DOM berdasarkan nilai atribut apa pun.
Bagaimana Cara Menemukan/Mengambil Elemen di DOM Berdasarkan Nilai Atribut?
Untuk menemukan elemen di DOM berdasarkan nilai atribut, gunakan tombol “ querySelector() ' metode. Ini memberikan elemen pertama yang ditemukan dalam dokumen yang cocok dengan nilai pemilih CSS yang diberikan.
Catatan : Untuk mendapatkan semua elemen yang cocok dengan nilai pemilih yang ditentukan, gunakan tombol “ querySelectorAll() ' metode.
Sintaksis
Untuk menggunakan metode “querySelector()”, gunakan sintaks berikut:
dokumen. querySelector ( pemilih ) ;
Di sini, pemilih akan berupa id atau kelas sebagai “ #pengenal ”, “ .kelas ”:
Anda juga dapat menggunakan sintaks yang diberikan untuk menemukan elemen berdasarkan nilai atribut:
dokumen. querySelector ( '[pemilih='nilai']' ) ;
Dalam sintaks di atas, “ pemilih ' akan ' pengenal ' atau ' kelas ”, atau “ nilai ' akan ' idName ' atau ' nama kelas ”.
Contoh
Dalam file HTML, buat elemen div yang berisi tajuk menggunakan elemen h4, teks biasa menggunakan tag , dan div untuk pesan dengan id yang ditetapkan ' pesan ”:
< id div = 'div' gaya = 'perataan teks: tengah;' >< h4 kelas = 'detik' pengenal = 'menuju' > Temukan sebuah Elemen di DOM Berdasarkan an Atribut Nilai h4 >
< rentang id = 'selamat datang' > Selamat Datang Di Linuxint menjangkau >
< id div = 'pesan' >
< p id = 'pesan' > Hallo teman-teman ! Selamat datang di Tutorial JavaScript Linuxint P >
div >
div >
Halaman akan terlihat seperti berikut:
Sekarang, kita akan mendapatkan elemen di mana id “ pesan ” ditugaskan menggunakan “ querySelector() ' metode:
setiap elemen = dokumen. querySelector ( '#pesan' )Terakhir, cetak elemen di konsol:
menghibur. catatan ( elemen ) ;Dalam output, ' div ” elemen ditampilkan dengan id yang ditetapkan “ pesan ”, yang menunjukkan bahwa elemen yang diperlukan telah berhasil diambil:
Anda juga bisa mendapatkan elemen menggunakan sintaks yang diberikan. Di sini, kita akan mendapatkan elemen yang id-nya adalah “ pesan ”:
setiap elemen = dokumen. querySelector ( '[id='pesan']' ) ;Keluaran
Sekarang, perbarui warnanya menggunakan “ gaya ' Properti:
elemen. gaya . warna = 'biru' ;Seperti yang Anda lihat, teksnya ada di “ hijau ”, dan sekarang telah diperbarui menjadi “ biru ”:
Itu semua tentang menemukan elemen dalam DOM berdasarkan nilai atribut.
Kesimpulan
Untuk menemukan elemen di DOM berdasarkan nilai atribut, gunakan “ querySelector() ” yang memberikan elemen pertama dalam dokumen yang cocok dengan nilai pemilih CSS yang ditentukan. Selain itu, untuk mendapatkan semua elemen yang sesuai dengan nilai pemilih yang ditentukan, gunakan tombol “ querySelectorAll() ' metode. Tutorial ini menjelaskan prosedur untuk menemukan elemen DOM berdasarkan nilai atribut apa pun.