Selamat datang di gerbang utama pengembangan Front-End! Jika JavaScript adalah otak dari sebuah situs web, maka DOM (Document Object Model) adalah tubuhnya. Tanpa DOM, JavaScript hanyalah logika murni yang tidak bisa berinteraksi dengan apa pun yang dilihat pengguna di layar.
1. Apa Itu DOM?
DOM adalah antarmuka pemrograman (interface) yang merepresentasikan struktur sebuah halaman web sebagai sebuah pohon objek (tree structure).
Saat browser memuat file HTML, ia mengubah kode teks tersebut menjadi objek-objek yang bisa dipahami dan dimanipulasi oleh JavaScript. Setiap elemen HTML, atribut, hingga teks di dalamnya menjadi sebuah "Node" atau titik dalam pohon tersebut.
2. Struktur Pohon DOM (DOM Tree)
Bayangkan sebuah pohon terbalik:
-
Document: Akar paling atas yang mewakili seluruh halaman web.
-
Root Element (
<html>): Batang utama. -
Element Nodes: Cabang-cabang seperti
<body>,<div>,<h1>, atau<p>. -
Attribute Nodes: Daun yang menempel pada cabang (seperti
href,src, atauclass). -
Text Nodes: Isi yang ada di dalam elemen (misalnya teks di dalam tombol).
3. Kenapa DOM Sangat Penting?
Tanpa DOM, halaman web bersifat statis (mati). Dengan DOM, JavaScript bisa melakukan "sihir" berikut:
-
Mengubah Konten: Mengganti teks atau gambar secara otomatis.
-
Mengubah Gaya (Style): Mengubah warna, ukuran, atau menyembunyikan elemen saat tombol diklik.
-
Menanggapi Interaksi: Menjalankan fungsi saat pengguna melakukan scroll, hover, atau click.
-
Menambah/Menghapus Elemen: Membuat baris baru dalam daftar belanja atau menghapus komentar.
4. Cara JavaScript Mengakses DOM
JavaScript menggunakan objek global bernama document untuk mulai bekerja dengan DOM. Berikut adalah beberapa metode dasar yang paling sering digunakan:
| Metode | Kegunaan |
document.getElementById('id') |
Mencari elemen berdasarkan ID unik. |
document.querySelector('.class') |
Mencari elemen pertama yang cocok dengan pemilih CSS. |
document.querySelectorAll('p') |
Mengambil semua elemen tertentu dan menyimpannya dalam daftar. |
5. Analogi Sederhana
Pikirkan halaman HTML sebagai Cetak Biru (Blueprint) sebuah rumah, dan DOM adalah Rumah Fisik yang sudah jadi.
-
Jika Anda ingin mengecat tembok (mengubah CSS) atau memindahkan furnitur (mengubah struktur HTML) setelah rumah itu berdiri, Anda harus masuk ke dalam rumah tersebut dan memegangnya secara fisik.
-
JavaScript adalah tukang bangunannya, dan DOM adalah pegangan atau akses yang digunakan tukang tersebut untuk memodifikasi rumah.
Kesimpulan
DOM adalah jembatan yang menghubungkan Halaman Web (HTML/CSS) dengan Bahasa Pemrograman (JavaScript). Memahami DOM berarti Anda mulai belajar bagaimana membangun aplikasi web yang interaktif dan responsif terhadap pengguna
