Bagian 27: Memahami DOM dan Event
Pada bagian ini, kita akan memahami konsep DOM (Document Object Model) dan bagaimana JavaScript dapat digunakan untuk memanipulasi elemen HTML serta menangani interaksi pengguna melalui event.
Apa itu DOM?
DOM (Document Object Model) adalah representasi struktur halaman HTML dalam bentuk objek yang dapat diakses dan dimanipulasi menggunakan JavaScript.
Sponsored
Mengakses Elemen DOM
Contoh mengambil elemen dengan id demo dan mengubah teksnya:
document.getElementById('demo').textContent = 'Teks telah diubah!';
Ini adalah teks awal.
Event Listener
Menambahkan event listener untuk tombol:
document.getElementById('ubahTeksBtn').addEventListener('click', function() {
document.getElementById('demo').textContent = 'Teks telah diubah dengan event listener!';
});
Dengan memahami cara kerja DOM dan event listener, Anda telah membuka pintu menuju pengembangan aplikasi web interaktif. Di bagian selanjutnya, kita akan memperdalam penggunaan Fetch API untuk berkomunikasi dengan server.
Pertanyaan Umum tentang DOM dan Event
- Apa itu DOM? DOM adalah struktur dokumen HTML yang dapat dimanipulasi menggunakan JavaScript untuk membuat halaman web menjadi dinamis.
- Apa itu event listener? Event listener adalah fungsi yang dijalankan saat suatu peristiwa (seperti klik) terjadi pada elemen HTML.
- Apakah semua elemen bisa dimanipulasi melalui DOM? Ya, hampir semua elemen dalam HTML dapat diakses dan dimanipulasi melalui DOM.