Di dunia nyata, kita memanggil orang dengan nama atau ciri-cirinya. Di DOM, kita memanggil elemen berdasarkan ID, Class, Nama Tag, atau Selector CSS.
🧩 Apa yang Akan Dipelajari
- Menggunakan selector spesifik (
getElementById). - Menggunakan selector kelompok (
getElementsByClassName). - Menggunakan selector modern dan fleksibel (
querySelector&querySelectorAll). - Memahami perbedaan antara hasil berupa satu elemen vs kumpulan elemen (NodeList/HTMLCollection).
⚙️ Persiapan
Buat file index.html dengan struktur berikut untuk latihan:
<h1 id="judul-utama">Selamat Datang</h1>
<p class="deskripsi">Ini paragraf pertama.</p>
<p class="deskripsi">Ini paragraf kedua.</p>
<button>Klik Saya</button>
🚀 Langkah-Langkah
1. Mencari Berdasarkan ID (getElementById)
Ini adalah cara paling cepat dan paling sering dipakai. ID itu unik, jadi hasilnya pasti cuma satu elemen.
const judul = document.getElementById('judul-utama');
console.log(judul); // Menampilkan elemen h1
2. Mencari Berdasarkan Class (getElementsByClassName)
Kalau kamu mau ambil banyak elemen sekaligus yang punya class sama. Hasilnya berupa HTMLCollection (mirip array, tapi bukan array beneran).
const semuaDeskripsi = document.getElementsByClassName('deskripsi');
console.log(semuaDeskripsi[0]); // Ambil paragraf pertama
3. Si Serba Bisa: querySelector
Ini adalah selector favorit developer modern. Kamu bisa pakai cara nulis ala CSS (pakai # untuk ID, . untuk class, atau nama tag langsung). Hanya mengambil elemen pertama yang ditemukan.
const elemenPertama = document.querySelector('.deskripsi'); // Class
const header = document.querySelector('h1'); // Tag
const tombol = document.querySelector('#btn-kirim'); // ID
4. Ambil Semua: querySelectorAll
Mirip querySelector, tapi dia ambil semua elemen yang cocok dan dimasukin ke dalam NodeList.
const daftarParagraf = document.querySelectorAll('.deskripsi');
// Karena ini NodeList, kita bisa pakai forEach (looping) langsung!
daftarParagraf.forEach(p => {
console.log(p.innerText);
});
💡 Tips Tambahan
- Prioritas Selector: Gunakan
getElementByIdkalau kamu cuma mau ambil satu elemen spesifik karena performanya paling cepat. GunakanquerySelectorAllkalau mau ambil banyak elemen untuk di-looping. - ID vs Class: Ingat, ID tidak boleh kembar di satu halaman HTML. Kalau kembar, JavaScript cuma bakal ambil yang paling atas.
- Console Tips: Kamu bisa ketik
$0di console browser setelah mengklik sebuah elemen di tab "Elements" untuk langsung memilih elemen tersebut secara instan!
❗ Troubleshooting
Masalah: Kenapa hasil selector saya null padahal ID-nya sudah benar?
Solusi: Cek urutan pemanggilan script. Jika file .js dipanggil sebelum elemen HTML dibuat (di dalam <head>), JavaScript tidak akan menemukan apa-apa. Solusinya, pindahkan <script> ke bawah sebelum </body> atau gunakan atribut defer.
🎯 Kesimpulan
Memilih elemen adalah langkah pertama sebelum kamu bisa melakukan aksi apa pun di website. Ingat: getElementById untuk yang unik, querySelector untuk fleksibilitas, dan querySelectorAll kalau kamu mau borong banyak elemen sekaligus.