Lanjutan JavaScript: Menguasai DOM & Event untuk Website Interaktif

Halo, kembali lagi di mafiatek! Setelah di artikel sebelumnya kita belajar pondasi JavaScript—mulai dari variabel, operator, sampai fungsi—kali ini kita bakal melangkah lebih jauh: berkenalan dengan DOM dan Event Handling. Nah, ini dia bagian seru dari JavaScript yang bikin website kamu jadi “hidup”, nggak cuma statis doang.

Apa Itu DOM? Kenalan Dulu Yuk!

DOM atau Document Object Model bukan bagian dari JavaScript, tapi JavaScript bisa ngobrol dengan DOM. Gampangnya, DOM itu representasi struktur HTML yang dibaca oleh browser sebagai pohon elemen.

Jadi, HTML <html> diibaratkan sebagai akar pohon, lalu di dalamnya ada <head>, <body>, dan seterusnya sampai ke elemen-elemen kecil kayak <button>, <p>, dan <div>.

JavaScript bisa berinteraksi dengan semua elemen ini—mulai dari ambil, ubah, sampai hapus—dengan mudah.

1. Cara Pilih Elemen DOM

document.getElementById("judul"); // Ambil elemen berdasarkan ID
document.querySelector(".kotak"); // Ambil elemen pertama yang cocok dengan selector
document.querySelectorAll("div"); // Ambil semua <div> sebagai NodeList

Contoh nyata:

const tombol = document.querySelector("#btn-submit");
tombol.textContent = "Klik Aku!";

2. Mengubah Konten dan Gaya

Setelah elemen kepegang, kamu bisa ubah isinya, bahkan stylenya:

const header = document.getElementById("judul");
header.innerHTML = "<h1>Selamat Datang!</h1>";
header.style.color = "tomato";

3. Tambah dan Hapus Elemen

JavaScript juga bisa bikin elemen baru langsung dari kode:

const kotakBaru = document.createElement("div");
kotakBaru.textContent = "Aku elemen baru!";
document.body.appendChild(kotakBaru);

Dan kalau udah nggak butuh? Tinggal hapus:

kotakBaru.remove();

Event Handling: Respon Otomatis dari Aksi User

Sekarang bayangin user ngeklik tombol. Gimana kita tanggapin? Nah, itu tugasnya event handler.

const tombol = document.querySelector("button");
tombol.addEventListener("click", () => {
  alert("Tombol diklik!");
});

Jenis event lain yang wajib kamu kenal:

click: Saat elemen diklik
mouseover: Saat kursor menyentuh elemen
keyup: Saat user selesai mengetik
submit: Saat form dikirim

Mini Project: Mode Gelap Sekali Klik

Yuk coba bikin tombol yang bisa ubah tampilan website jadi dark mode:

<button id="dark-mode">Mode Gelap</button>

const tombol = document.querySelector("#dark-mode");
tombol.addEventListener("click", () => {
  document.body.style.backgroundColor = "#111";
  document.body.style.color = "white";
  tombol.textContent = "Mode Terang";
});

Gampang banget kan? Web langsung berubah suasana!

SEO & Performa: Tetap Waspada

Website interaktif memang keren, tapi jangan lupa: terlalu banyak manipulasi DOM bisa bikin web lemot. Pastikan:

Gunakan kode efisien
Hindari terlalu banyak event listener
Pakai teknik event delegation kalau perlu
Tambahkan atribut ARIA untuk aksesibilitas

Dengan mengenal DOM dan event, kamu sekarang udah bisa bikin website yang interaktif dan engaging. Tinggal banyakin latihan, eksperimen lewat DevTools, dan kamu bakal makin jago.

Selanjutnya, kita bakal bahas AJAX dan Fetch API biar bisa ambil data dari server tanpa reload halaman. Sampai jumpa di artikel AJAX & Fetch API: Ambil Data Tanpa Reload Halaman, dan seperti biasa—jangan berhenti ngoding!