Jago JavaScript 2 #1: Apa itu DOM & Bagaimana Cara Kerjanya?

Mungkin kamu sering dengar istilah "Manipulasi DOM", tapi apa sih sebenarnya DOM itu? Singkatnya, DOM adalah cara browser melihat halaman HTML kamu bukan sebagai teks biasa, melainkan sebagai sebuah struktur pohon (Tree) yang bisa diubah-ubah lewat kode.

🧩 Apa yang Akan Dipelajari

Memahami kepanjangan dan arti dari Document Object Model.
Melihat bagaimana HTML berubah menjadi DOM Tree.
Memahami hubungan antara Parent, Child, dan Sibling.
Cara sederhana "mengintip" DOM lewat JavaScript.

⚙️ Persiapan

Text Editor (VS Code).
Browser (Chrome/Edge).
Sebuah file index.html sederhana.

🚀 Langkah-Langkah

1. Definisi DOM (Document Object Model)

Document: Halaman web kamu (file HTML).
Object: Setiap elemen di HTML (h1, div, p, button) diubah menjadi "objek" oleh browser agar bisa kita perintah.
Model: Susunan atau struktur dari objek-objek tersebut.

Jadi, DOM adalah antarmuka (interface) yang memungkinkan JavaScript untuk membuat, mengubah, atau menghapus struktur, gaya, dan isi dari sebuah website.

2. Bagaimana HTML Menjadi DOM?

Saat kamu membuka sebuah website, browser melakukan proses bernama parsing. Browser membaca kode HTML kamu dari atas ke bawah, lalu membangun sebuah peta yang disebut DOM Tree.

Misal kamu punya kode ini:

<html>
  <body>
    <h1>Halo Dunia</h1>
    <p>Belajar DOM itu seru!</p>
  </body>
</html>

Di mata browser, kodenya akan terlihat seperti pohon keluarga:

html adalah akar (Root).
body adalah anak (Child) dari html.
h1 dan p adalah adik-kakak (Sibling) yang merupakan anak dari body.

3. Hirarki di Dalam DOM

Dalam DOM, setiap bagian disebut sebagai Node (Simpul). Ada beberapa jenis Node yang penting kamu tahu:

Element Node: Tag HTML-nya (seperti <div>, <a>).
Text Node: Tulisan yang ada di dalam tag tersebut.
Attribute Node: Sesuatu yang nempel di tag (seperti class, id, src).

4. Cara "Menyentuh" DOM Pertama Kali

Buka console browser kamu, lalu ketik perintah sakti ini untuk melihat objek utama dari halaman webmu:

console.log(document); 
// Menampilkan seluruh struktur HTML kamu sebagai objek

console.dir(document); 
// Menampilkan properti-properti teknis dari objek document

Jika kamu ingin melihat judul halaman lewat JS, kamu bisa ketik:

console.log(document.title);

💡 Tips Tambahan

DOM Bukan HTML: HTML adalah apa yang kamu tulis di editor. DOM adalah apa yang ada di memori browser setelah HTML di-load. Kamu bisa mengubah DOM tanpa mengubah file asli .html-mu.
Live Preview: Perubahan pada DOM bersifat sementara. Kalau kamu refresh halaman, semua kembali ke setelan pabrik (sesuai file HTML asli).

❗ Troubleshooting

Masalah: Kenapa kode JavaScript saya tidak bisa mengubah elemen HTML, padahal kodenya benar? Solusi: Pastikan kamu menaruh tag <script> di bagian paling bawah sebelum penutup </body>. Kalau ditaruh di atas, JavaScript akan mencoba mengubah elemen yang belum selesai "digambar" oleh browser.

🎯 Kesimpulan

DOM adalah "jembatan" yang menghubungkan JavaScript dengan tampilan website. Dengan memahami struktur pohon (Tree) pada DOM, kamu bisa dengan mudah menentukan elemen mana yang ingin kamu ubah, hapus, atau tambahkan secara dinamis.