DOM selektor: querySelector

getElementById, querySelector, querySelectorAll.

Pahami konsepnya

DOM (Document Object Model) mengubah HTML menjadi pohon objek JavaScript yang bisa dimanipulasi. Untuk mengubah elemen, pertama pilih elemennya: document.getElementById("id") memberi SATU elemen ber-id tersebut. document.querySelector("css-selector") memberi elemen PERTAMA yang cocok dengan selector CSS apa pun — ".kelas", "#id", "nav > ul > li".

querySelectorAll memberi NodeList berisi SEMUA elemen yang cocok — bisa di-for-each. NodeList mirip array tapi bukan array sungguhan; konversi dengan [...list] untuk method array lengkap.

Modern praktik: selalu gunakan querySelector/querySelectorAll — mereka menerima selector CSS lengkap sehingga satu API menutup semua kebutuhan. getElementById lebih cepat tapi terbatas pada id saja.

Coba contoh kode

<!doctype html>
<html>
<body>
  <h1 id="judul">Halo</h1>
  <p class="teks">Paragraf 1</p>
  <p class="teks">Paragraf 2</p>

  <script>
    // cara klasik
    const j = document.getElementById("judul");

    // cara modern
    const p1 = document.querySelector(".teks");
    const semua = document.querySelectorAll(".teks");

    console.log(j.textContent);       // Halo
    console.log(p1.textContent);      // Paragraf 1
    console.log(semua.length);        // 2
    semua.forEach(p => console.log(p.textContent));
  </script>
</body>
</html>

querySelector(".teks") memberi elemen PERTAMA berkelas teks; querySelectorAll memberi NodeList dua elemen. forEach bekerja langsung di NodeList tanpa konversi.

Latihan singkat

Uji: buat fungsi pilih(data, selector) yang mengembalikan elemen ber-id — pilih([{id:"a"},{id:"b"}], "b") harus `b`.