Jika kamu sedang belajar membuat website menggunakan JavaScript, kamu pasti akan sering mendengar istilah DOM. Tapi, apa sebenarnya DOM itu? Dan bagaimana DOM membantu kita dalam membuat halaman web menjadi interaktif?
Yuk, kita bahas secara rinci namun tetap mudah dimengerti!
Apa Itu DOM?
DOM adalah singkatan dari Document Object Model.
DOM bukan bagian dari JavaScript secara langsung, tapi JavaScript menggunakannya untuk berinteraksi dengan elemen-elemen di halaman HTML.
Secara sederhana, DOM adalah representasi struktur dari halaman web dalam bentuk objek yang bisa diakses dan dimanipulasi oleh JavaScript.
Bayangkan halaman HTML kamu seperti pohon keluarga:
html adalah akar (root)
head dan body adalah cabang utama
elemen-elemen seperti h1, p, dan div adalah anak-anaknya (nodes)
Semua struktur ini bisa dibaca dan dimodifikasi menggunakan JavaScript melalui DOM.
Mengapa DOM Penting?
Tanpa DOM, halaman web hanya bersifat statis. Dengan DOM, kita bisa:
Mengubah isi teks di halaman
Menyembunyikan atau menampilkan elemen tertentu
Menangani interaksi pengguna seperti klik, input, atau hover
Menambahkan elemen baru secara dinamis
Contoh Manipulasi DOM
1. Mengubah Teks
html
Halo Dunia!
javascript
document.getElementById("judul").innerText = "Selamat Datang!";
???? Teks di dalam elemen
akan berubah menjadi "Selamat Datang!"
2. Menyembunyikan Elemen
javascript
document.getElementById("judul").style.display = "none";
???? Elemen dengan id="judul" akan disembunyikan dari tampilan.
3. Menambahkan Elemen Baru
javascript
let pBaru = document.createElement("p"); pBaru.innerText = "Ini paragraf tambahan."; document.body.appendChild(pBaru);
???? Kode ini akan menambahkan paragraf baru ke akhir halaman.
Akses DOM dengan JavaScript
Ada beberapa cara umum untuk memilih (atau "menargetkan") elemen HTML menggunakan JavaScript:
| Fungsi | Keterangan |
|---|---|
getElementById() | Pilih elemen berdasarkan id |
getElementsByClassName() | Pilih semua elemen dengan class tertentu |
getElementsByTagName() | Pilih elemen berdasarkan tag (contoh: p) |
querySelector() | Pilih satu elemen menggunakan selector CSS |
querySelectorAll() | Pilih semua elemen yang cocok dengan selector CSS |
Event: Respon terhadap Interaksi
DOM juga memungkinkan kita menangkap interaksi pengguna, seperti klik tombol.
Contoh:
html
Klik Aku!
Belum diklik
javascript
function ubahTeks() { document.getElementById("pesan").innerText = "Tombol diklik!"; }
Kesimpulan
DOM adalah fondasi utama dalam membuat halaman web menjadi interaktif dan dinamis. Dengan memahami cara kerja DOM, kamu bisa mengontrol dan mengubah isi halaman web menggunakan JavaScript dengan mudah.
Jadi, jika kamu ingin membangun web yang responsif, interaktif, dan keren — DOM adalah teman terbaikmu!