JavaScriptTingkat: Menengah6 min
Manipulasi Dokumen DOM & Event Handling
Kuasai Document Object Model (DOM) untuk membaca elemen, mengubah konten teks, memanipulasi kelas CSS, dan menangani event klik pengguna.
Konsep Dasar Document Object Model (DOM)
Pratinjau TerbukaDOM adalah representasi struktur pohon (tree) dari dokumen HTML yang memungkinkan JavaScript berinteraksi dengan elemen antarmuka.
Poin Penting:
document.getElementById() & document.querySelector() untuk menyeleksi elemen.
element.textContent & element.innerHTML untuk memperbarui isi teks.
element.classList.add() & element.classList.toggle() untuk mengatur class styling dinamis.
Mendaftarkan Event Listener
Metode addEventListener() adalah standar utama untuk mendengarkan aksi pengguna seperti klik mouse, input keyboard, atau submit formulir.
// Menangkap elemen tombol
const tombolAksi = document.querySelector('#btn-proses');
tombolAksi.addEventListener('click', (event) => {
console.log("Tombol berhasil diklik pada koordinat:", event.clientX, event.clientY);
document.body.classList.toggle('dark-theme');
});
Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi