Bayangin deh, kamu lagi jalan-jalan di sebuah mall yang super besar. Di dalam mall ini, ada berbagai toko, koridor, dan ruang-ruang yang bisa kamu jelajahi. Nah, sekarang bayangin DOM itu kayak mall tersebut, dan di dalam mall itu, ada berbagai elemen HTML yang bisa kamu akses—tapi kamu butuh cara yang tepat buat menemukannya, kan? Di sinilah getElementById()
, querySelector()
, dan teman-temannya masuk untuk jadi GPS kamu, yang siap nuntun kamu ke tujuan dengan cepat dan mudah. ðŸ§
Jadi, daripada kamu keliling mall gak jelas, mending kita pakai cara yang efisien buat nyasar di DOM. Yuk, kita bahas gimana cara menavigasi DOM dengan gampang dan bikin hidup kamu jauh lebih praktis!
1. getElementById() - Si Pencari Kunci yang Tepat!
Kalau di mall ada toko yang kamu pengen datangi, dan kamu tahu banget letaknya (karena udah ngingetin lewat id yang unik), kamu tinggal bilang, "Toko dengan nama id ini, tolong bawa saya ke sana!" Nah, getElementById()
itu kayak pemandu yang ngajarin kamu cara cepat nyari toko (elemen HTML) dengan ID tertentu. Dia bakal langsung nganterin kamu ke tujuan tanpa banyak omong!
Contoh Penggunaan getElementById():
<h1 id="judul">Halo, Selamat Datang di Dunia DOM!</h1> <button onclick="ubahTeks()">Ubah Judul</button> <script> function ubahTeks() { document.getElementById("judul").innerHTML = "Judul Sudah Diubah!"; } </script>
Penjelasan:
Kita punya <h1>
dengan id="judul"
, dan lewat getElementById()
, kita bisa ngakses elemen itu secara langsung. Ketika tombol diklik, kita mengubah teks yang ada di dalamnya. Simple, kan?
2. querySelector() - Pencari Semua Toko, Tapi Punya Pilihan!
Kalau getElementById()
itu cuma bisa mencari elemen dengan ID yang spesifik, maka querySelector()
itu lebih fleksibel. Ibarat kamu lagi di mall, dan kamu bisa pilih mau ke toko baju, sepatu, atau aksesoris—semua bisa ditemukan dengan cara ini! querySelector()
memungkinkan kamu mencari elemen dengan id, class, atau tag yang lebih umum.
Contoh Penggunaan querySelector():
<p class="teks-penting">Teks penting yang harus diperhatikan!</p> <button onclick="ubahWarna()">Ganti Warna</button> <script> function ubahWarna() { document.querySelector(".teks-penting").style.color = "red"; } </script>
Penjelasan:
Di sini, kita menggunakan querySelector()
untuk memilih elemen dengan class teks-penting
dan mengubah warnanya. querySelector()
bisa nyari elemen berdasarkan class, id, atau tag, jadi dia lebih fleksibel daripada getElementById()
yang cuma nyari berdasarkan ID. Jadi kalau kamu butuh pilihan lebih, querySelector()
adalah teman yang tepat!
3. querySelectorAll() - Semua Toko di Mall, Semua Bisa Ditemukan!
Gimana kalau kamu nggak cuma pengen satu toko, tapi semua toko yang punya diskon gede? Nah, querySelectorAll()
bisa ngasih kamu semua elemen yang sesuai dengan selektor yang kamu kasih—semuanya dalam sekali pencarian!
Contoh Penggunaan querySelectorAll():
<p class="teks-penting">Teks pertama!</p> <p class="teks-penting">Teks kedua!</p> <p class="teks-penting">Teks ketiga!</p> <button onclick="ubahSemuaWarna()">Ganti Semua Warna</button> <script> function ubahSemuaWarna() { let teks = document.querySelectorAll(".teks-penting"); teks.forEach(function(elemen) { elemen.style.color = "blue"; }); } </script>
Penjelasan:
Dengan querySelectorAll()
, kita bisa pilih semua elemen dengan class teks-penting
dan ganti warna teksnya jadi biru! Perbedaannya adalah, querySelectorAll()
mengembalikan NodeList yang berisi semua elemen yang cocok, jadi kita bisa iterasi (mengulang) dan ngubah semuanya sekaligus.
4. getElementsByClassName() - Pencari Semua Toko Berdasarkan Kategori!
getElementsByClassName()
itu mirip banget sama querySelectorAll()
, bedanya dia cuma bisa nyari elemen berdasarkan class aja. Jadi kalau kamu pengen cari semua elemen dengan class yang sama, dia adalah pencari yang pas. Cuma, ingat! Hasil dari getElementsByClassName()
itu bukan array, tapi HTMLCollection, jadi sedikit lebih susah diolah dibandingkan NodeList dari querySelectorAll()
.
Contoh Penggunaan getElementsByClassName():
<p class="teks-penting">Ini teks pertama!</p> <p class="teks-penting">Ini teks kedua!</p> <button onclick="ubahSemuaWarna()">Ubah Semua Warna</button> <script> function ubahSemuaWarna() { let teks = document.getElementsByClassName("teks-penting"); for (let i = 0; i < teks.length; i++) { teks[i].style.color = "green"; } } </script>
Penjelasan:
Dengan getElementsByClassName()
, kita bisa mengakses semua elemen dengan class teks-penting
, dan mengganti warnanya jadi hijau. Tapi inget, hasilnya itu HTMLCollection, jadi kita perlu pakai for
untuk iterasi elemen-elemennya.
Kesimpulan: Navigasi DOM, Seperti Jadi Tour Guide!
Jadi, menavigasi DOM itu ibarat jadi tour guide di mall besar. Kamu bisa memilih cara yang tepat buat mengakses toko-toko yang kamu butuhkan—baik itu pake getElementById()
buat akses langsung, atau querySelector()
dan querySelectorAll()
buat nyari toko berdasarkan kelas atau tag yang lebih luas. Kalau kamu butuh pilihan lebih banyak, getElementsByClassName()
bisa jadi pilihan, walaupun kadang dia agak ribet.
Apapun itu, yang penting, kamu nggak akan tersesat lagi di dunia DOM—sekarang kamu udah punya peta dan pemandu yang siap nemenin kamu keliling website!
Jadi, siap menavigasi DOM dengan penuh percaya diri? Let’s go!
0 Comments