Bagian 11: Dasar-Dasar DOM JavaScript

Setelah mempelajari dasar-dasar JavaScript, kini kita akan mengenal bagaimana JavaScript dapat berinteraksi langsung dengan elemen-elemen HTML

Apa Itu DOM?

DOM (Document Object Model) adalah representasi struktur halaman web yang bisa dimanipulasi menggunakan JavaScript.

Contoh Manipulasi DOM

Dengan JavaScript, kita bisa mengubah konten, menambahkan elemen, atau menghapus elemen HTML secara dinamis.

<button onclick="ubahTeks()">Klik Saya</button>
<p id="demo">Ini paragraf awal.</p>

<script>
function ubahTeks() {
  document.getElementById("demo").innerHTML = "Paragraf telah diubah!";
}
</script>

Simulator Mini

Manipulasi Properti dan Gaya

<div id="box">Kotak</div>
<button onclick="ubahWarna()">Ubah Warna</button>

<script>
function ubahWarna() {
  document.getElementById("box").style.backgroundColor = "yellow";
}
</script>

Simulator Mini

Pada bagian berikutnya, kita akan membahas tentang event handling, yaitu cara merespon interaksi pengguna seperti klik, input, dan lainnya