Istilah DOM dalam pemrograman berarti Document Object Model.
DOM adalah representasi struktur dokumen (biasanya HTML atau XML) dalam bentuk objek yang bisa diakses dan dimanipulasi menggunakan bahasa pemrograman paling umum JavaScript di web.
Penjelasan Sederhana
Bayangkan halaman web seperti pohon keluarga:
<html>
└── <body>
├── <h1>Judul</h1>
└── <p>Paragraf</p>
DOM menggambarkan struktur ini sebagai “pohon objek” (tree of nodes).
Setiap elemen (<html>, <body>, <h1>, <p>) adalah node yang bisa kamu akses, ubah, tambah, atau hapus lewat kode.
Contoh DOM di JavaScript
HTML:
<h1 id="judul">Halo Dunia!</h1>
<button id="ubah">Ubah Teks</button>JavaScript:
// Mengakses elemen dengan id "judul"
const judul = document.getElementById("judul");
// Mengubah isi teks
judul.textContent = "Halo DOM!";
// Menambahkan interaksi
document.getElementById("ubah").addEventListener("click", () => {
judul.style.color = "blue";
judul.textContent = "Teks telah diubah!";
});
Penjelasan di sini:
documentadalah akar DOM.getElementById()digunakan untuk mengambil elemen.textContentdanstyledigunakan untuk memodifikasi elemen.
Fungsi Utama DOM
- Membaca data dari dokumen (misalnya teks dari paragraf).
- Mengubah konten atau gaya (ubah teks, warna, posisi, dsb).
- Menambah atau menghapus elemen (misalnya menambah daftar baru).
- Menangani interaksi pengguna (klik tombol, input, dsb).
Struktur DOM dan Node
DOM terdiri dari berbagai jenis node, yaitu bagian terkecil dari dokumen.
Beberapa jenis node yang umum digunakan:
| Jenis Node | Contoh | Keterangan |
|---|---|---|
| Document | document | Akar dari seluruh halaman |
| Element | <h1>, <p>, <div> | Setiap tag HTML |
| Text | Teks dalam elemen | Isi teks dari elemen |
| Attribute | id, class | Properti dari elemen |
Mengapa DOM Penting?
Tanpa DOM, halaman web akan statis dan tidak interaktif.
DOM memungkinkan website modern berfungsi secara dinamis dan responsif, seperti:
- Mengubah tampilan halaman tanpa memuat ulang.
- Menampilkan data secara real-time.
- Membuat efek animasi dan transisi.
- Menjalankan logika interaktif seperti formulir dan notifikasi.
Dengan memahami DOM, kamu akan lebih mudah membuat website yang hidup, interaktif, dan responsif terhadap setiap aksi pengguna.
