DOM Selector: Memilih Elemen

Menunjuk elemen yang dimaksud

Sebelum mengubah elemen, kamu harus memilihnya dulu. JavaScript menyediakan beberapa cara, dari yang spesifik sampai yang fleksibel.

getElementById: tercepat untuk satu elemen

// <h1 id="judul">Halo</h1>
let judul = document.getElementById("judul");
console.log(judul.textContent); // "Halo"

ID harus unik di satu halaman, jadi hasilnya selalu satu elemen (atau null kalau tidak ketemu).

querySelector: paling fleksibel

querySelector memakai sintaks CSS selector, jadi semua pola CSS bisa dipakai:

let judul = document.querySelector("#judul");      // by id
let teks = document.querySelector(".teks");        // by class (pertama)
let tombol = document.querySelector("button");     // by tag (pertama)
let input = document.querySelector("form input");  // kombinasi

Ini method yang paling sering dipakai di kode modern karena satu method untuk semua pola.

querySelectorAll: ambil semuanya

Untuk banyak elemen sekaligus:

// <li class="item">...</li> ada 3 buah
let items = document.querySelectorAll(".item");
console.log(items.length); // 3

items.forEach(item => {
  console.log(item.textContent);
});

Hasilnya NodeList yang bisa di-iterasi dengan forEach. Untuk method array lain seperti map, ubah dulu: [...items].

Method klasik lainnya

document.getElementsByClassName("item"); // HTMLCollection
document.getElementsByTagName("p");      // HTMLCollection

Keduanya mengembalikan HTMLCollection yang live (otomatis update saat DOM berubah). Di kode baru, querySelector(All) lebih disarankan karena sintaksnya konsisten.

Catatan teknis: querySelectorAll mengembalikan NodeList yang statis: snapshot saat dipanggil, tidak ikut update kalau DOM berubah setelahnya. Sebaliknya getElementsByClassName mengembalikan koleksi live. Perbedaan ini penting saat kamu menambah elemen dalam loop.

Selector level lanjut

Karena querySelector memakai sintaks CSS, semua selector CSS bisa dipakai:

// anak ke-2 dari list
document.querySelector("li:nth-child(2)");

// input dengan atribut name tertentu
document.querySelector('input[name="email"]');

// tombol di dalam form login
document.querySelector("#form-login button");

// semua link eksternal
document.querySelectorAll('a[href^="http"]');

Selector atribut seperti [name="email"] dan [href^="http"] (diawali http) sangat berguna saat elemen tidak punya id atau class. Investasi belajar CSS selector terbayar dua kali: untuk styling dan untuk memilih elemen di JavaScript.

Menyimpan hasil seleksi

Seleksi DOM itu relatif mahal, jadi simpan hasilnya kalau dipakai berulang:

// kurang efisien: seleksi tiap kali
function update() {
  document.querySelector("#skor").textContent = skor;
}

// lebih baik: seleksi sekali di luar
let elSkor = document.querySelector("#skor");
function update() {
  elSkor.textContent = skor;
}

Pola cache elemen ini kebiasaan baik di semua kode DOM. Seleksi sekali saat inisialisasi, pakai referensinya berkali-kali. Untuk elemen yang dibuat dinamis, seleksi ulang setelah ia ditambahkan ke DOM.

Kesimpulan

Hafalkan querySelector untuk satu elemen dan querySelectorAll untuk banyak elemen. Keduanya memakai sintaks CSS yang sudah kamu kenal, jadi tidak ada yang perlu dihafal dari nol.