Hallo sobat program, bertemu lagi dengan saya Rizal dan masih tetap di website dumetschool. Dikesempatan ini saya masih akan tetap membahas tentang fungsi-fungsi pada javascript. Dan dipembahasan kali ini yaitu tentang Cara Menggunakan Fungsi querySelectorAll pada Javascript.
Penjelasan tentang fungsi dari querySelectorAll adalah sebuah fungsi dari javascript yang bertujuan untuk memilih semua yang dipilih atau memilih selector CSS pada dokumen HTML. Misalnya dalam dokumen HTML terdapat banyak class paragraph (.paragraph) maka dengan menggunakan querySelectorAll(“.paragraphâ€) kita sudah dapat memilih semua yang mempunyai class paragraph dan dapat kita berikan style CSS kepada semua class paragraph tsb.
Untuk penjelasan serta contoh dasarnya saya rasa cukup paham ya teman-teman, oke baiklah mari kita lanjut untuk Cara Menggunakan Fungsi querySelectorAll pada Javascript.. Langkah pertama teman-teman jalankan/run software text-editornya kemudian ketiklah kode HTMLnya seperti pada contoh dibawah ini :
|
1 2 3 4 5 |
<div class="container"> <div class="kotak"></div> <div class="kotak"></div> <div class="kotak"></div> </div> |
Jika sudah dengan HTMLnya, langkah selanjutnya teman-teman tambahkan sedikit style CSS nya seperti pada contoh dibawah ini :
|
1 2 |
.container {width: 900px; height:300px; margin: 50px auto; background:grey;} .kotak {width: 200px; height: 200px; background: lightgreen; float: left; margin:50px;} |
Dari kedua kode diatas jika dijalankan, maka hasilnya akan nampak seperti pada contoh dibawah ini :
Jika sudah seperti pada gambar hasil diatas, langkah terakhir kita menggunakan fungsi querySelectorAll untuk merubah warna dari yang saya berikan tanda merah itu. Teman-teman bisa ketik kode javascript nya seperti pada contoh dibawah ini :
|
1 2 3 4 |
<script type="text/javascript"> var x = document.querySelectorAll(".kotak"); x[1].style.backgroundColor = "red"; </script> |
Pada kode diatas saya menggunakan fungsi querySelectorAll untuk memilih class kotak lalu saya gunakan metode nodelist untuk memilih hanya yang tengah saja yang saya ubah warna nya menjadi merah. Dan jika direfresh maka hasilnya akan seperti pada contoh dibawah ini :
Jadi seperti itulah contoh dasar tentang Cara Menggunakan Fungsi querySelectorAll pada Javascript. Semoga dapat bermanfaat buat teman-teman dan silahkan explore lagi dari fungsi querySelectortAll pada javascript.
Sampai bertemu dipembahasan selanjutnya.
Terimakasih