Interaktivitas Web Sederhana dengan JavaScript DOM

Apa Itu DOM?

Document Object Model (DOM) adalah jembatan yang memungkinkan JavaScript membaca dan memodifikasi struktur HTML yang sedang aktif di browser. Dengan DOM, halaman web kita berubah dari sekadar dokumen statis menjadi aplikasi interaktif.

Langkah 1: Menangkap Elemen

Metode paling umum dan direkomendasikan adalah document.querySelector():

const tombol = document.querySelector("#btn-simpan");
const pesan = document.querySelector(".pesan-notifikasi");

Langkah 2: Menunggu Aksi Pengguna (Event Listener)

Kita dapat memasang pendengar acara (event listener) saat tombol ditekan:

tombol.addEventListener("click", function () {
  pesan.textContent = "Data berhasil disimpan dengan rapi!";
  pesan.classList.add("tampil");
});