DOM: Seleksi Elemen

DOM Itu Apa dan Kenapa Seleksi Itu Langkah Pertama?

DOM (Document Object Model) adalah representasi halaman HTML sebagai pohon object yang bisa dimanipulasi JavaScript. Setiap tag menjadi node: document adalah akarnya, <body> cabangnya, dan seterusnya. Sebelum kamu bisa mengubah teks, warna, atau memasang event, kamu harus dulu "menunjuk" elemen yang dimaksud. Itulah seleksi, dan ia adalah langkah pertama dari SEMUA manipulasi DOM.

Bayangkan DOM seperti denah rumah: kamu tidak bisa mengecat dinding kalau tidak tahu dinding yang mana. Method seleksi adalah caramu menunjuk "dinding ruang tamu".

Empat Cara Menyeleksi

Contoh sederhana dengan HTML playground modul ini (<h1 id="judul"> dan dua <p class="item">):

document.getElementById("judul");        // satu elemen, by id (paling cepat)
document.getElementsByClassName("item"); // koleksi semua ber-class item
document.querySelector(".item");         // SATU pertama yang cocok (sintaks CSS)
document.querySelectorAll(".item");      // SEMUA yang cocok (NodeList)

querySelector adalah yang paling fleksibel karena memakai sintaks CSS yang sudah kamu kenal:

document.querySelector("#form input[name=email]"); // input email di dalam #form
document.querySelector("ul.menu > li:first-child"); // li pertama di ul.menu
document.querySelectorAll("button.hapus");          // semua tombol hapus

Contoh realistis: mengambil semua item lalu menampilkan teksnya bernomor.

const judul = document.getElementById("judul");
console.log("Judul halaman:", judul.textContent);

const items = document.querySelectorAll(".item");
console.log("Jumlah item:", items.length);
items.forEach((el, i) => {
  console.log(`Item ${i + 1}: ${el.textContent}`);
});

Kapan Pakai yang Mana?

• Butuh SATU elemen dengan id unik? getElementById: paling cepat dan paling jelas.
• Seleksi kompleks ala CSS (kombinasi class, atribut, pseudo)? querySelector / querySelectorAll.
• getElementsByClassName me-return HTMLCollection yang "hidup" (otomatis mengikuti perubahan DOM), sedangkan querySelectorAll me-return NodeList statis. Untuk kebanyakan kasus, NodeList lebih predictable.

Elemen Bisa Bernilai null

Ini sumber error nomor satu pemula DOM:

const el = document.getElementById("tidak-ada");
console.log(el); // null
el.textContent;  // TypeError! tidak bisa baca properti dari null

Selalu pastikan id/class-nya benar. Pola defensifnya:

const tombol = document.getElementById("tombol");
if (tombol) {
  tombol.textContent = "Siap diklik";
} else {
  console.warn("Elemen #tombol tidak ditemukan, cek HTML");
}

Jebakan Umum

• Script yang dieksekusi SEBELUM HTML selesai dimuat tidak akan menemukan elemen apa pun. Solusinya: taruh <script> tepat sebelum '</body>' (seperti semua playground di sini), tambahkan atribut defer, atau bungkus kodemu dalam document.addEventListener("DOMContentLoaded", ...).
• Salah ketik id: getElementById("Judul") tidak sama dengan getElementById("judul"). Id bersifat case-sensitive.
• querySelectorAll me-return NodeList, bukan Array. Ia punya forEach tapi tidak punya map atau filter. Butuh method array? Konversi dulu: [...document.querySelectorAll(".item")].

Ringkasan

Seleksi adalah gerbang semua manipulasi DOM: getElementById untuk satu elemen by id, querySelector/querySelectorAll untuk seleksi fleksibel ala CSS. Selalu waspadai hasil null dan pastikan script berjalan setelah HTML dimuat. Kuasai querySelector karena sintaksnya sama dengan CSS yang sudah kamu kenal, jadi tidak ada hal baru untuk dihafal.