Pengenalan DOM

Jembatan antara HTML dan JavaScript

DOM (Document Object Model) adalah representasi HTML sebagai pohon object di memori browser. JavaScript tidak bisa menyentuh HTML secara langsung, ia bekerja lewat DOM.

Bayangkan HTML-mu seperti silsilah keluarga: html adalah kakek, head dan body adalah anaknya, dan elemen-elemen di dalam body adalah cucu-cicitnya. DOM adalah versi object dari silsilah ini.

<html>
  <body>
    <h1 id="judul">Halo</h1>
    <p class="teks">Selamat datang</p>
  </body>
</html>

Di DOM, setiap elemen menjadi node yang bisa dipilih, dibaca, diubah, bahkan dihapus lewat JavaScript.

document: pintu masuknya

Object document adalah pintu masuk ke seluruh DOM. Semua operasi DOM dimulai darinya:

console.log(document.title); // judul tab browser
console.log(document.URL);   // alamat halaman

Struktur pohon

Setiap node punya hubungan keluarga:

• parent: node di atasnya
• children: node di bawahnya
• sibling: node yang sejajar

Memahami struktur pohon penting karena banyak operasi DOM (seperti traversing) bergerak mengikuti hubungan ini.

Kenapa DOM penting?

Tanpa DOM, JavaScript hanya bisa menghitung di console. Dengan DOM, JavaScript bisa:

1. Mengubah teks dan tampilan halaman secara dinamis
2. Merespons klik dan input pengguna
3. Menambah atau menghapus elemen tanpa reload

Inilah yang membuat web jadi aplikasi interaktif, bukan sekadar dokumen.

Catatan teknis: DOM bukan bagian dari bahasa JavaScript itu sendiri, melainkan API yang disediakan browser. Artinya kode DOM tidak bisa jalan di Node.js polos karena di sana tidak ada document. Ini juga alasan script harus dimuat setelah HTML selesai di-parse.

Mengintip DOM di devtools

Cara terbaik memahami DOM adalah melihatnya langsung. Buka halaman web apapun, tekan F12, lalu buka tab Elements. Di sana kamu melihat pohon DOM yang hidup: arahkan kursor ke baris HTML, browser akan menyorot elemennya di halaman.

Coba di console tab yang sama:

document.body.style.border = "5px solid red";

Satu baris itu mengubah DOM dan hasilnya langsung terlihat: seluruh body punya border merah. Ini bukti nyata bahwa DOM adalah object hidup yang terhubung dengan tampilan. Setiap manipulasi DOM yang kamu pelajari di modul-modul berikutnya bisa dicoba langsung dengan cara ini di website manapun.

Kesimpulan

DOM = HTML yang diubah jadi object pohon agar bisa dimanipulasi JavaScript. Modul berikutnya membahas cara memilih node yang tepat dari pohon ini.