Pas browser baca HTML kamu, dia gak baca string teks saja — dia ubah jadi struktur pohon yang bisa "disentuh" sama JavaScript. Pohon itu namanya DOM (Document Object Model). Tiap tag jadi node, tiap atribut jadi property. JavaScript bisa baca, tambah, ubah, hapus node — dan browser otomatis re-render halaman. Itu rahasia di balik semua web interaktif: counter yang berubah pas tombol diklik, pesan baru yang muncul di chat, modal yang slide-in. Semua manipulasi DOM.

💡 DOM = jembatan HTML ↔ JavaScript. Tanpa DOM, JavaScript gak bisa "ngomong" sama HTML. Dengan DOM, halaman jadi canvas yang bisa di-paint ulang real-time. Konsep ini adalah fondasi dari semua framework modern (React, Vue, Svelte) — mereka semua dasarnya manipulasi DOM dengan abstraksi yang lebih tinggi.

// Mengambil elemen
const judul = document.querySelector("h1");

// Mengubah konten
judul.textContent = "Judul Baru";

// Mengubah style
judul.style.color = "blue";

// Membuat elemen baru
const p = document.createElement("p");
p.textContent = "Paragraf baru!";
document.body.appendChild(p);

🎭 Analogi sehari-hari

DOM = peta gedung kantor. Setiap elemen HTML = ruangan. JavaScript = teknisi serba bisa yang bisa:

• Cat ulang dinding (style.color)
• Ganti tulisan di pintu (textContent)
• Bangun ruangan baru (createElement + appendChild)
• Bongkar ruangan lama (remove)

querySelector = cari ruangan pakai alamat (CSS selector). Kalau alamat salah = null (TypeError pas dipakai).

⚠️ Jebakan yang sering ditemui

• querySelector return null kalau tidak ketemu. Akses .textContent di null = TypeError. Pakai optional chaining: el?.textContent.
• innerHTML = userInput = XSS! User input bisa nyelipin <script>. Pakai textContent untuk teks biasa.
• CSS property camelCase di JS. background-color → backgroundColor. font-size → fontSize. Bukan kebab-case.
• style.color = "blue" ubah inline style — menang dari CSS file (specificity tinggi). Bisa bikin susah debug "kenapa CSS tidak jalan".
• querySelector cari SATU pertama. Mau semua? Pakai querySelectorAll (return NodeList).
• DOM operation lambat — query 1000x di loop = lag. Cache const el = document.querySelector(...) sekali, pakai berulang.
• appendChild elemen yang sudah di DOM = PINDAH, bukan duplikat. Mau duplikat? Pakai .cloneNode(true).

TL;DR: DOM = struktur pohon yang JavaScript bisa "sentuh" — baca/ubah/tambah/hapus elemen, browser auto re-render. Jembatan HTML ↔ JS, fondasi semua framework modern (React, Vue). Method utama: querySelector/querySelectorAll, textContent/innerHTML, style.X, createElement+appendChild. AWAS XSS: innerHTML = userInput BAHAYA — pakai textContent. CSS property camelCase di JS (backgroundColor bukan background-color). Cache query di luar loop, jangan re-query.