Bagian 13: Manipulasi DOM dengan JavaScript
Pada bagian ini, kamu akan mempelajari bagaimana JavaScript dapat digunakan untuk memanipulasi halaman web secara dinamis melalui DOM (Document Object Model). Ini adalah dasar penting untuk membuat situs web interaktif.
Apa itu DOM?
DOM (Document Object Model) adalah representasi struktur dokumen HTML dalam bentuk objek yang bisa dimanipulasi menggunakan JavaScript. Dengan DOM, kita bisa mengubah isi, struktur, dan gaya halaman web secara dinamis.
Memilih Elemen DOM
Kita dapat memilih elemen menggunakan metode seperti:
document.getElementById("id")
document.getElementsByClassName("class")
document.querySelector("selector")
document.querySelectorAll("selector")
Contoh Manipulasi DOM
Kode JavaScript berikut akan mengubah teks dalam sebuah paragraf ketika tombol diklik.
Simulasi Manipulasi DOM
Ubah teks paragraf di bawah ini dengan mengklik tombol.
Jika kamu sudah memahami cara kerja DOM, di bagian berikutnya kita akan melanjutkan dengan event handling agar elemen di halaman dapat merespons aksi pengguna.