Memilih Elemen DOM

Setiap interaksi pada section ini bermuara pada satu langkah dasar: memilih elemen yang akan dibaca atau diubah. Browser telah membentuk DOM dari dokumen HTML, dan objek document menyediakan metode pencarian untuk menjelajahinya. Pada chapter ini kita mempelajari tiga metode terpenting — getElementById, querySelector, dan querySelectorAll — beserta perilaku null ketika elemen tidak ditemukan. Kita juga menegaskan syarat yang terus kita terapkan: script hanya boleh berjalan setelah elemen yang dicari ada.

Document, Pintu Masuk ke DOM #

Dari JavaScript, dokumen yang sedang tampil diwakili oleh objek global bernama document. Objek ini menyediakan metode pencarian elemen; ketiga metode pada chapter ini dipanggil dari sana:

getElementById #

Metode paling langsung adalah getElementById: mencari tepat satu elemen berdasarkan nilai atribut id.

const ringkasan = document.getElementById("ringkasan");

Karena id wajib unik pada satu halaman, metode ini mengembalikan satu objek elemen atau null — sekaligus pencarian tercepat di antara ketiganya. Selector CSS tidak diperlukan: cukup tulis nilai id-nya tanpa tanda pagar.

querySelector: Satu Elemen dengan Selector CSS #

Metode querySelector menerima selector CSS apa pun yang telah kita kuasai pada section HTML dan CSS, lalu mengembalikan kecocokan pertama dalam urutan dokumen:

const kartuPertama = document.querySelector(".kartu");
const alamatToko = document.querySelector("footer address");

Nilai ".kartu" mengikuti notasi selector class, "footer address" adalah selector turunan, dan pola seperti "#menu" juga sah. Keunggulannya konsisten: satu metode untuk semua pola pencarian. Bila tidak ada kecocokan, hasilnya null.

querySelectorAll: Semua Kecocokan #

Metode querySelectorAll mengembalikan seluruh kecocokan dalam satu wadah bernama NodeList:

const semuaKartu = document.querySelectorAll(".kartu");
semuaKartu.forEach(function (kartu) {
  console.log(kartu); // periksa hasil seleksi pada console browser
});

NodeList menyimpan elemen sesuai urutan dokumen. Wadah ini memiliki properti length dan metode forEach untuk menelusuri setiap elemen; baris console.log pada contoh mencetak isi variabel ke console browser sebagai pemeriksaan cepat. Bila tidak ada kecocokan, hasilnya NodeList kosong — bukan null — sehingga forEach tetap berjalan tanpa error.

Bila Elemen Tidak Ditemukan #

getElementById dan querySelector mengembalikan null ketika tidak menemukan apa pun. Masalah muncul ketika hasil itu disentuh: baris ringkasan.textContent = "..." atas objek null melempar error TypeError: Cannot read properties of null (reading 'textContent') — pesan yang paling sering ditemui pemula.

Tiga penyebabnya umum terjadi:

• Typo pada nama id atau selector, misalnya getElementById("ringksan").
• Elemen memang tidak ada pada halaman tersebut.
• Script berjalan sebelum elemen sempat dibentuk parser.

Script Harus Berjalan Setelah Elemen Ada #

Sebab ketiga layak ditegaskan: script classic di head dieksekusi sebelum elemen body terbentuk, sehingga pencarian elemen menghasilkan null. Dua pola aman yang telah kita gunakan menyelesaikan hal ini:

• Menaruh elemen script di akhir body, atau
• Memakai defer pada script eksternal, sehingga eksekusi menunggu parsing selesai.

Contoh di bawah memakai pola kedua itu.

Contoh Lengkap: Memilih dan Menampilkan Hasil #

Contoh berikut memakai ketiga metode sekaligus, lalu menulis ringkasannya ke halaman. Properti textContent untuk menulis hasil baru dibedah pada chapter berikutnya; fokus kita adalah proses seleksinya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Kontak Komunitas</title>
  <script src="pilih-elemen.js" defer></script>
</head>
<body>
  <h1>Kartu Kontak Komunitas</h1>
  <p id="ringkasan">Memuat ringkasan…</p>
  <article class="kartu">
    <h2>Budi Santoso</h2>
    <p>[email protected]</p>
  </article>
  <article class="kartu">
    <h2>Siti Rahma</h2>
    <p>[email protected]</p>
  </article>
  <article class="kartu">
    <h2>Dewi Lestari</h2>
    <p>[email protected]</p>
  </article>
</body>
</html>

// Memilih elemen lalu menulis ringkasan hasil seleksi
const ringkasan = document.getElementById("ringkasan");
const kartuPertama = document.querySelector(".kartu");
const semuaKartu = document.querySelectorAll(".kartu");

const jumlahKartu = semuaKartu.length;
const namaPertama = kartuPertama.querySelector("h2").textContent;

ringkasan.textContent = "Jumlah kartu: " + jumlahKartu +
  ". Kartu pertama milik " + namaPertama + ".";

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Heading "Kartu Kontak Komunitas"
  - Paragraf ringkasan berubah menjadi:
    "Jumlah kartu: 3. Kartu pertama milik Budi Santoso."
  - Tiga kartu kontak tetap tampil seperti biasa

Mari kita telaah peran setiap baris penting di atas:

1. Baris 7 HTML (<script src="pilih-elemen.js" defer>): script eksternal di head dengan defer; eksekusi menunggu seluruh kartu terbentuk.
2. Baris 11 HTML (<p id="ringkasan">): teks sementara yang akan digantikan oleh script.
3. Baris 2 JS (getElementById("ringkasan")): memilih satu elemen sasaran berdasarkan id.
4. Baris 3 JS (querySelector(".kartu")): memilih kecocokan pertama selector class, yaitu kartu milik Budi.
5. Baris 4 JS (querySelectorAll(".kartu")): mengumpulkan ketiga kartu ke dalam satu NodeList.
6. Baris 6 JS (semuaKartu.length): properti length menghitung isi NodeList; hasilnya 3.
7. Baris 7 JS (kartuPertama.querySelector("h2")): metode pencarian juga bisa dipanggil dari sebuah elemen, sehingga pencarian h2 hanya di dalam kartu pertama.
8. Baris 9-10 JS (penulisan ringkasan): hasil seleksi disusun menjadi satu kalimat, lalu ditulis ke paragraf ringkasan.

Tiga metode di atas mencakup hampir seluruh kebutuhan pemilihan elemen pada section ini. Langkah wajar berikutnya adalah mengubah isi elemen terpilih, dan kita mulai dari yang paling sering: mengubah teks.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Document: getElementById()
• MDN Web Docs — Document: querySelector()
• MDN Web Docs — Document: querySelectorAll()

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Kontak Komunitas</title>
  <script src="pilih-elemen.js" defer></script>
</head>
<body>
  <h1>Kartu Kontak Komunitas</h1>
  <p id="ringkasan">Memuat ringkasan…</p>
  <article class="kartu">
    <h2>Budi Santoso</h2>
    <p>[email protected]</p>
  </article>
  <article class="kartu">
    <h2>Siti Rahma</h2>
    <p>[email protected]</p>
  </article>
  <article class="kartu">
    <h2>Dewi Lestari</h2>
    <p>[email protected]</p>
  </article>
</body>
</html>

// Memilih elemen lalu menulis ringkasan hasil seleksi
const ringkasan = document.getElementById("ringkasan");
const kartuPertama = document.querySelector(".kartu");
const semuaKartu = document.querySelectorAll(".kartu");

const jumlahKartu = semuaKartu.length;
const namaPertama = kartuPertama.querySelector("h2").textContent;

ringkasan.textContent = "Jumlah kartu: " + jumlahKartu +
  ". Kartu pertama milik " + namaPertama + ".";