JavaScript Ngintip Halaman HTML: Kenalan Sama DOM (Document Object Model)!

Udah bisa bikin fungsi dan logika dasar pake JavaScript? Keren banget! Sekarang, gimana caranya biar JavaScript kita itu gak cuma "ngomong sendiri" di konsol, tapi bisa bener-bener berinteraksi sama halaman HTML yang diliat pengguna? Misalnya, gimana caranya JavaScript bisa ngubah teks di paragraf, nambahin item baru ke daftar, atau nyembunyiin gambar pas tombol diklik?

Jawabannya ada di DOM, singkatan dari Document Object Model.

Apa Sih DOM Itu Sebenernya?

Bayangin halaman HTML-mu itu kayak sebuah dokumen. Pas browser nge-load halaman HTML itu, dia gak cuma nampilinnya gitu aja. Di belakang layar, browser bakal ngebikin representasi struktur halaman HTML itu di memori komputernya dalam bentuk objek-objek yang saling terhubung. Nah, struktur objek inilah yang disebut DOM.

Jadi, DOM adalah sebuah antarmuka (interface) pemrograman untuk dokumen HTML (dan XML juga sih, tapi kita fokus ke HTML dulu). DOM ini ngewakilin halaman web sebagai struktur pohon (tree structure) yang terdiri dari node-node (simpul-simpul).

Dokumen (Document): Ini adalah keseluruhan halaman webmu. Di JavaScript, kita bisa ngaksesnya lewat objek global document.
Objek (Object): Setiap bagian dari dokumenmu – elemen HTML (kayak <body>, <h1>, <p>, <div>), atribut elemen (kayak id, class, src), bahkan teks di dalem elemen – itu semua diwakilin sebagai objek di dalem DOM.
Model (Model): DOM ini adalah "model" atau "cetakan" dari struktur logis dokumenmu. JavaScript bisa "baca" model ini buat tau ada apa aja di halaman, dan bisa "nulis" ke model ini buat ngubah tampilan atau isi halaman.

Analogi Pohon DOM (DOM Tree): Seringkali DOM digambarin kayak struktur pohon terbalik:

Elemen <html> jadi akar (root) pohonnya.
Elemen <head> dan <body> jadi anak (child) dari <html>.
Elemen-elemen lain di dalem <head> dan <body> jadi anak-anak dari elemen pembungkusnya, dan seterusnya, ngebentuk cabang-cabang dan daun-daun.

Analogi Pohon DOM (DOM Tree)

Seringkali DOM digambarin kayak struktur pohon terbalik. Bayangkan seperti ini:

Setiap "titik" di pohon ini (elemen, atribut, teks) disebut node.

Kenapa DOM Itu Penting Banget buat JavaScript?

DOM ini adalah jembatan penghubung antara kode JavaScript-mu dan halaman HTML yang diliat pengguna. Tanpa DOM, JavaScript cuma bisa ngelakuin perhitungan atau logika internal, tapi gak bisa ngapa-ngapain halaman web-nya.

Dengan adanya DOM, JavaScript bisa:

Mencari dan Memilih Elemen HTML: JS bisa nemuin elemen spesifik di halaman berdasarkan ID-nya, nama kelasnya, nama tag-nya, atau pake selector CSS.
Mengubah Konten Elemen HTML: JS bisa ganti teks di dalem paragraf, ngubah isi judul, atau bahkan nambahin HTML baru ke dalem div.
Mengubah Atribut Elemen HTML: JS bisa ganti nilai atribut src di gambar, href di link, atau nambah/ngapus atribut class.
Mengubah Style CSS Elemen HTML: JS bisa ngubah warna teks, background, ukuran font, atau properti CSS lainnya secara dinamis.
Menambah dan Menghapus Elemen HTML: JS bisa bikin elemen HTML baru dari nol terus dimasukin ke halaman, atau ngapus elemen yang udah ada.
Merespon Event (Aksi Pengguna): JS bisa "ngedengerin" kapan pengguna ngeklik tombol, ngetik di input, atau nge-scroll halaman, terus ngelakuin sesuatu sebagai responsnya. (Ini melibatkan DOM Event).

Intinya, DOM ngasih JavaScript kekuatan buat ngemodifikasi halaman web secara dinamis setelah halaman itu dimuat. Inilah yang bikin website jadi interaktif!

Objek `document`: Pintu Masuk ke DOM

Di JavaScript, "pintu masuk" utama buat ngakses dan manipulasi DOM adalah lewat objek global bawaan yang namanya document.

Objek document ini ngewakilin keseluruhan halaman HTML yang lagi dibuka. Dia punya banyak banget properti dan metode yang bisa kita pake. Beberapa contoh (nanti kita bahas lebih detail cara pakenya):

document.getElementById('id-elemen'): Buat milih elemen berdasarkan ID-nya.
document.querySelector('selector-css'): Buat milih elemen pertama yang cocok sama selector CSS.
document.createElement('namaTag'): Buat bikin elemen HTML baru.
document.body: Ngasih akses langsung ke elemen <body>.
document.title: Ngasih akses (bisa dibaca/ditulis) ke judul halaman (yang ada di tag <title>).

Contoh Super Simpel (Jangan khawatir kalau belum ngerti semua kodenya sekarang): Anggap kita punya HTML:

html

<h1 id="judul-utama">Halo Dunia!</h1>
<button id="tombolUbah">Ubah Judul</button>

Terus kita punya JavaScript:

javascript

// Pilih tombol berdasarkan ID-nya
const tombol = document.getElementById('tombolUbah');
 
// Tambahin "pendengar" buat event klik di tombol
tombol.addEventListener('click', function() {
    // Pilih elemen h1 berdasarkan ID-nya
    const judul = document.getElementById('judul-utama');
    // Ubah teks di dalem h1 itu
    judul.textContent = 'Judulnya Sudah Diubah oleh JavaScript!';
});

Di contoh ini:

JavaScript "minta tolong" ke document buat nyariin elemen tombol dan elemen judul.
Terus, JavaScript "ngasih tau" tombol, "Eh, kalau kamu diklik, panggil fungsi ini ya."
Pas tombol diklik, fungsi itu dijalanin. Di dalem fungsi, JavaScript "nyuruh" elemen judul buat ganti teksnya.

Semua interaksi ini bisa terjadi karena adanya DOM!

DOM Itu Bukan JavaScript, Tapi...

Penting buat diinget: DOM itu sendiri BUKAN bagian dari bahasa JavaScript inti. DOM itu adalah standar API (Application Programming Interface) yang ditentuin sama W3C (World Wide Web Consortium).

JavaScript cuma salah satu bahasa pemrograman yang bisa mengakses dan memanipulasi DOM di lingkungan browser. Browser-browser (Chrome, Firefox, dll.) adalah yang "ngebangun" DOM dari HTML-mu dan nyediain API DOM itu buat bisa dipake sama JavaScript.

Jadi, DOM itu kayak "peta" atau "remote control" buat halaman HTML-mu, dan JavaScript itu "tangan" yang bisa make peta atau neken tombol di remote control itu.

Ngertiin konsep DOM ini adalah langkah awal yang krusial sebelum kita bisa bener-bener bikin halaman web yang dinamis dan interaktif pake JavaScript. Awalnya mungkin kerasa abstrak, tapi seiring kita praktik milih elemen, ngubah konten, dan nanganin event, konsep DOM ini bakal makin "klik".

Di materi berikutnya, kita bakal belajar cara-cara spesifik buat "nangkep" atau milih elemen HTML dari DOM pake berbagai metode JavaScript. Siap jadi "detektif" elemen?

Kuis Pengenalan DOM JavaScript

Pertanyaan 1 dari 5

Apa kepanjangan dari DOM dalam konteks pengembangan web?

Pengenalan DOM di JS