Pertemuan 7-8: Interaksi & Manipulasi DOM

Pengertian

DOM (Document Object Model) adalah representasi dari dokumen HTML dalam bentuk struktur pohon yang dapat dimengerti oleh JavaScript. Setiap elemen, atribut, dan teks di dalam HTML dianggap sebagai "objek" atau "node" di dalam pohon ini. Manipulasi DOM adalah proses di mana JavaScript mengakses dan mengubah node-node ini untuk memperbarui konten, struktur, atau gaya halaman secara dinamis. Events (Kejadian) adalah aksi yang dilakukan pengguna (seperti click, mouseover, keydown) yang dapat kita "dengarkan" untuk memicu manipulasi DOM tersebut.

Analogi

Contoh Kode & Hasil

1. Memilih Elemen & Mengubah Konten

Menggunakan getElementById untuk memilih elemen dan .textContent untuk mengubah teks di dalamnya.

// Ambil elemen tombol dan paragraf
const tombolUbah = document.getElementById('btn-dom-1');
const teksUntukDiubah = document.getElementById('teks-contoh-1');

// Tambahkan event listener 'click' pada tombol
tombolUbah.addEventListener('click', () => {
  teksUntukDiubah.textContent = 'Teks berhasil diubah oleh JavaScript!';
});

Penjelasan Kode: addEventListener adalah cara modern untuk "mendengarkan" sebuah event. Ketika event 'click' terjadi pada tombolUbah, fungsi panah (arrow function) di dalamnya akan dieksekusi, yang kemudian mengubah properti textContent dari paragraf.

2. Mengubah Style CSS

Memanipulasi properti CSS dari sebuah elemen melalui properti .style.

const kotak = document.getElementById('box-contoh-2');

kotak.addEventListener('mouseover', () => { // Saat kursor masuk
  kotak.style.backgroundColor = '#ef4444'; // Merah
  kotak.style.transform = 'scale(1.1)';
});

kotak.addEventListener('mouseout', () => { // Saat kursor keluar
  kotak.style.backgroundColor = '#3b82f6'; // Biru
  kotak.style.transform = 'scale(1.0)';
});

Penjelasan Kode: Kita mendengarkan dua event: mouseover dan mouseout. Setiap event memicu fungsi yang mengubah properti CSS dari elemen kotak, menciptakan efek interaktif.

3. Mengambil Nilai dari Input Form

JavaScript dapat membaca nilai yang diketikkan pengguna ke dalam form.

const inputNama = document.getElementById('input-nama');
const tombolSapa = document.getElementById('btn-dom-3');
const hasilSapaan = document.getElementById('sapaan-hasil');

tombolSapa.addEventListener('click', () => {
  const nama = inputNama.value; // Ambil nilai dari input
  hasilSapaan.textContent = 'Halo, ' + nama + '!';
});

Penjelasan Kode: Properti .value digunakan untuk mengambil atau mengatur nilai dari elemen form seperti input, textarea, dan select.

Latihan Mandiri

Kesimpulan

Manipulasi DOM adalah kekuatan super dari JavaScript di dunia web. Dengan kemampuan untuk memilih elemen apa pun di halaman (seleksi), mengubah konten, gaya, atau atributnya (manipulasi), dan merespons aksi pengguna (events), kita dapat menciptakan pengalaman pengguna yang dinamis dan responsif, mengubah halaman dari dokumen statis menjadi aplikasi interaktif.