Pertemuan 7: JavaScript DOM dan Event

20 Sep 2026kribbiadminWeb Programming

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu mengakses dan mengubah elemen HTML menggunakan DOM serta menangani kejadian (event) dari pengguna seperti klik, input, dan pengiriman formulir.

Apa itu DOM

DOM atau Document Object Model adalah representasi pohon dari dokumen HTML yang bisa dimanipulasi oleh JavaScript. Setiap tag menjadi sebuah node atau elemen, dan setiap elemen memiliki properti dan metode yang bisa diakses. Ketika JavaScript mengubah DOM, tampilan browser diperbarui secara langsung tanpa memuat ulang halaman.

Karena DOM adalah jembatan antara kode dan halaman, memahami cara menemukan elemen menjadi keterampilan pertama yang wajib dikuasai. Dokumen diakses melalui global document.

Memilih Elemen

Beberapa metode digunakan untuk menemukan elemen. querySelector mengembalikan elemen pertama yang cocok dengan selektor CSS apa pun, sedangkan querySelectorAll mengembalikan semua kecocokan sebagai daftar node. Metode getElementById mencari berdasarkan atribut id.

Setelah sebuah elemen didapat, properti textContent dan innerHTML digunakan untuk membaca atau mengganti isinya. textContent mengubah teks polos sedangkan innerHTML bisa menyisipkan kode HTML.

<code class="language-html"><p id="pesan">Halo</p>
<button id="tombol">Ganti</button>
<script>
const pesan = document.querySelector("#pesan");
pesan.textContent = "Selamat datang!";
const list = document.querySelectorAll("li");
list.forEach(li => li.style.color = "navy");
</script></code>

Event dan Listener

Event adalah kejadian yang terjadi pada halaman, seperti klik, penekanan tombol, gerakan mouse, atau pengiriman formulir. Untuk merespons event, kitamenggunakan addEventListener yang menerima nama event dan fungsi callback yang dijalankan ketika event terjadi.

Metode ini lebih disarankan daripada atribut onclick di HTML karena memisahkan perilaku dari struktur dan memungkinkan lebih dari satu listener pada elemen yang sama.

<code class="language-javascript">const tombol = document.querySelector("#tombol");
tombol.addEventListener("click", function () {
  alert("Tombol diklik!");
});</code>

Event Input dan Formulir

Event input terjadi setiap kali isi sebuah kotak teks berubah, cocok untuk validasi langsung saat pengguna mengetik. Event submit terjadi saat formulir dikirim; kode kemudian memanggil preventDefault untuk mencegah tindakan bawaan browser agar halaman tidak memuat ulang.

Pola ini adalah dasar validasi formulir dan membangun aplikasi halaman tunggal yang halus.

<code class="language-javascript">const form = document.querySelector("#form");
form.addEventListener("submit", function (e) {
  e.preventDefault();
  const nama = document.querySelector("#nama").value;
  if (nama === "") alert("Nama tidak boleh kosong");
  else alert("Terima kasih, " + nama);
});</code>

Langkah Praktik

Buat halaman dengan satu kotak input, satu tombol, dan satu paragraf hasil. Tambahkan listener click pada tombol yang mengambil nilai input dan menampilkannya ke paragraf. Tambahkan juga event input yang memperbarui hasil secara langsung saat mengetik.

Coba tambahkan tombol kedua yang menambahkan item baru ke sebuah daftar setiap kali diklik menggunakan createElement dan appendChild, untuk merasakan cara menambah elemen ke DOM.

Konsep Kunci

DOM atau Document Object Model adalah representasi pohon dari dokumen HTML yang bisa dimanipulasi oleh JavaScript.
Setiap tag menjadi sebuah node atau elemen, dan setiap elemen memiliki properti dan metode yang bisa diakses.
Ketika JavaScript mengubah DOM, tampilan browser diperbarui secara langsung tanpa memuat ulang halaman.
Karena DOM adalah jembatan antara kode dan halaman, memahami cara menemukan elemen menjadi keterampilan pertama yang wajib dikuasai.
Beberapa metode digunakan untuk menemukan elemen.
querySelector mengembalikan elemen pertama yang cocok dengan selektor CSS apa pun, sedangkan querySelectorAll mengembalikan semua kecocokan sebagai daftar node.
Metode getElementById mencari berdasarkan atribut id.
Setelah sebuah elemen didapat, properti textContent dan innerHTML digunakan untuk membaca atau mengganti isinya.
textContent mengubah teks polos sedangkan innerHTML bisa menyisipkan kode HTML.
Event adalah kejadian yang terjadi pada halaman, seperti klik, penekanan tombol, gerakan mouse, atau pengiriman formulir.
Untuk merespons event, kitamenggunakan addEventListener yang menerima nama event dan fungsi callback yang dijalankan ketika event terjadi.
Metode ini lebih disarankan daripada atribut onclick di HTML karena memisahkan perilaku dari struktur dan memungkinkan lebih dari satu listener pada elemen yang sama.
Event input terjadi setiap kali isi sebuah kotak teks berubah, cocok untuk validasi langsung saat pengguna mengetik.
Event submit terjadi saat formulir dikirim; kode kemudian memanggil preventDefault untuk mencegah tindakan bawaan browser agar halaman tidak memuat ulang.

Contoh Kode

<code class="language-javascript">const knop = document.querySelector("#knop");

knop.addEventListener("click", () => {
  console.log("Clicked");
});</code>

<code class="language-javascript">const lijst = document.querySelector("ul");
const item = document.createElement("li");
item.textContent = "New item";
lijst.appendChild(item);</code>

Latihan

Bangun aplikasi daftar tugas sederhana: sebuah input dan tombol Tambah yang menambahkan tugas baru ke dalam daftar, plus tombol Hapus pada setiap item yang menghapus baris tersebut dari DOM. Terapkan event submit dengan preventDefault untuk mencegah reload.