File HTML yang kita simpan hanyalah teks statis: karakter yang berurutan di penyimpanan, diam sampai dibuka. Begitu browser membacanya, teks tersebut diterjemahkan menjadi struktur objek di memori yang disebut DOM (Document Object Model). Seluruh hal yang dilihat pengunjung — dan seluruh hal yang bisa diubah JavaScript — bekerja pada DOM, bukan pada teks file. Memahami bentuk DOM membuat setiap gejala debugging punya tempat bertanya.

Chapter ini membedah struktur pohon DOM, hubungan antar simpulnya, dan alasan perubahan JavaScript langsung terlihat di panel Elements.

DOM: Pohon Simpul #

DOM berbentuk pohon. Akarnya adalah objek document; anak pertamanya elemen html, yang memuat dua cabang: head dan body, dan seterusnya sampai simpul terdalam. Tiga jenis simpul membangun pohon: simpul elemen (tag), simpul teks (isi teks elemen), dan simpul komentar. Satu aturan penting: setiap simpul teks selalu menjadi anak dari sebuah elemen — teks tidak pernah berdiri sendiri tanpa induk.

Perhatikan dokumen sederhana berikut:

html salam.html — sumber 
<!DOCTYPE html>
<html lang="id">
<head>
  <title>Menu Kopi</title>
</head>
<body>
  <!-- spanduk depan kedai -->
  <h1>Kedai Kopi Siti</h1>
  <p>Selamat datang kembali.</p>
</body>
</html>

Dokumen tersebut menghasilkan pohon DOM ini:

text 
document
└── html
    ├── head
    │   └── title
    │       └── "Menu Kopi"
    └── body
        ├── (komentar: spanduk depan kedai)
        ├── h1
        │   └── "Kedai Kopi Siti"
        └── p
            └── "Selamat datang kembali."

Mari kita telaah peta pohon di atas:

  1. document: akar pohon — bukan elemen, melainkan objek dokumen yang menaungi semuanya.
  2. html → head, body: dua cabang utama; head menyimpan metadata, body menyimpan isi yang tampil.
  3. title → “Menu Kopi”: elemen title memuat satu simpul teks sebagai anak.
  4. (komentar): komentar di file ikut masuk DOM sebagai simpul komentar di posisinya.
  5. h1 dan p: masing-masing memuat satu simpul teks — “Selamat datang kembali.” adalah anak dari p, bukan bagian dari elemen p itu sendiri.

Model yang Hidup #

HTML berhenti bergerak begitu disimpan; DOM tidak. JavaScript bisa menambah, menghapus, dan mengganti simpul kapan saja selama halaman terbuka, dan panel Elements selalu menampilkan keadaan terbaru. Itulah alasan panel tersebut adalah tampilan DOM, bukan tampilan HTML:

html 
<p id="stok">Kopi Arabika tersedia hari ini.</p>
<button id="jual" type="button">Jual satu paket</button>
<script>
  const stok = document.getElementById("stok");
  stok.textContent = "Kopi Arabika habis.";
</script>

Mari kita telaah cara kerja skrip di atas:

  1. Baris 1 (<p id="stok">): elemen diberi id agar mudah ditemukan kembali di pohon DOM.
  2. Baris 3 (<script>): skrip dijalankan setelah dua elemen di atasnya sudah hadir di DOM, sehingga pencarian tidak gagal.
  3. Baris 4 (getElementById("stok")): fungsi mencari simpul elemen ber-id stok pada pohon, lalu menyimpannya di variabel stok.
  4. Baris 5 (textContent): properti ini mengganti seluruh simpul teks anak p; halaman dan panel Elements menampilkan teks baru seketika, tanpa memuat ulang.

Skrip pada blok di atas berjalan begitu halaman dibuka; demo berikut memindahkan momen yang sama ke ujung jari. Tekan tombolnya beberapa kali dan amati dua perubahan sekaligus: teks paragraf berganti tanpa memuat ulang, dan daftar di bawah tombol bertambah satu butir pada setiap tekanan:

Pada demo, skrip dibungkus event click agar momen perubahan terlihat, dan daftar riwayat ditambahkan sebagai contoh simpul baru — mekanisme getElementById dan textContent-nya sama persis dengan blok pengajaran di atas.

Inilah DOM yang sedang bekerja. textContent mengganti simpul teks anak p; createElement dan appendChild menambah simpul li baru ke ul — keduanya tampil seketika karena browser me-render pohon di memori, bukan teks file di penyimpanan. Tekan tombolnya sampai stok habis, lalu muat ulang halaman ini: demo kembali ke keadaan semula karena browser membaca ulang file yang sama dan membangun DOM baru dari nol — file HTML-nya sendiri tidak pernah tersentuh.

Struktur pohon inilah yang kita telusuri pada setiap sesi debugging. Selanjutnya, kita menguji dokumen terhadap aturan baku HTML dengan pemeriksa yang tidak pernah menoleransi: validator.