JavaScript DOM: Cara Manipulasi Elemen di Browser
Kalau lo mau bikin website jadi interaktif (bisa klik tombol, ganti teks, ubah warna, atau munculin popup), lo perlu belajar DOM (Document Object Model). DOM memungkinkan kita berinteraksi langsung dengan elemen HTML lewat JavaScript.
1. Apa Itu DOM?
DOM (Document Object Model) adalah representasi struktur halaman web dalam bentuk pohon (tree). Setiap elemen HTML (tag) dianggap sebagai node yang bisa diakses dan dimanipulasi dengan JavaScript.
Contoh Struktur DOM:
<html>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
<button>Klik</button>
</body>
</html>
👉 Dengan DOM, kita bisa ambil <h1>, ubah teks paragraf, atau tambahin event ke tombol.
2. Mengakses Elemen DOM
Ada beberapa cara untuk memilih elemen:
// Ambil elemen berdasarkan ID
let title = document.getElementById("judul");
// Ambil elemen berdasarkan class
let items = document.getElementsByClassName("item");
// Ambil elemen berdasarkan tag
let paragraphs = document.getElementsByTagName("p");
// Ambil elemen pakai querySelector (lebih fleksibel)
let button = document.querySelector("button");
3. Mengubah Konten & Style
Ubah teks dan HTML:
document.getElementById("judul").innerText = "Hello DOM!";
document.getElementById("judul").innerHTML = "<em>Hello dengan HTML</em>";
Ubah style:
let box = document.getElementById("box");
box.style.backgroundColor = "lightblue";
box.style.fontSize = "20px";
4. Menambahkan & Menghapus Elemen
// Buat elemen baru
let newItem = document.createElement("li");
newItem.innerText = "Item Baru";
// Tambahkan ke daftar
document.getElementById("list").appendChild(newItem);
// Hapus elemen
let oldItem = document.getElementById("hapus");
oldItem.remove();
5. Event Listener
Event listener dipakai untuk menanggapi aksi user (klik, hover, input).
let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
alert("Tombol diklik!");
});
👉 Saat tombol dengan ID btn diklik, muncul alert.
6. Contoh Project Mini: Ganti Warna Box
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Demo DOM</title>
</head>
<body>
<h2 id="judul">Belajar DOM</h2>
<div id="box" style="width:100px; height:100px; background:tomato; margin-bottom:10px;"></div>
<button id="btn">Ganti Warna</button>
<script>
let btn = document.getElementById("btn");
let box = document.getElementById("box");
btn.addEventListener("click", function() {
box.style.backgroundColor = "lightgreen";
document.getElementById("judul").innerText = "Box berubah warna!";
});
</script>
</body>
</html>
👉 Saat tombol diklik: - Box merah berubah jadi hijau. - Judul ikut berubah teks.
Kesimpulan
Dengan JavaScript DOM, lo bisa:
- Mengakses elemen HTML (ID, class, tag, querySelector)
- Mengubah konten dan style
- Menambah atau menghapus elemen
- Menggunakan event listener untuk interaksi user
👉 Next step: coba bikin project mini seperti todo list, kalkulator, atau form validasi dengan memanfaatkan DOM. Itu akan bikin skill JavaScript lo makin naik level 🔥
