DOM apaan tuh

DOM adalah kependekan dari Document Object Model. DOM adalah representasi dari struktur dokumen HTML atau XML sebagai sebuah objek yang dapat dimanipulasi melalui JavaScript atau bahasa pemrograman lainnya.

DOM memungkinkan pengembang web untuk mengakses, menavigasi, dan memanipulasi elemen-elemen pada halaman web secara dinamis, baik itu menambahkan, menghapus, atau mengubah elemen-elemen tersebut. Dengan mengakses dan memanipulasi elemen-elemen pada halaman web, pengembang dapat membuat interaksi yang lebih dinamis dan responsif, seperti membuat efek animasi, memvalidasi form, atau mengubah tampilan halaman secara dinamis.

Secara umum, DOM terdiri dari sebuah pohon hierarki dari objek-objek yang merepresentasikan elemen-elemen pada halaman web. Setiap elemen pada halaman web direpresentasikan sebagai sebuah objek dalam pohon DOM, dan setiap objek tersebut memiliki properti dan metode yang dapat dimanipulasi melalui JavaScript.

Dalam konteks pengembangan web, pengetahuan tentang DOM sangat penting karena hampir semua interaksi pada halaman web melibatkan manipulasi pada elemen-elemen pada halaman web yang direpresentasikan dalam DOM. Oleh karena itu, pemahaman tentang cara kerja DOM dan bagaimana memanipulasinya sangat penting bagi pengembang web untuk menciptakan pengalaman pengguna yang lebih baik dan dinamis pada website.

Contoh penggunaan DOM adalah ketika kita ingin mengubah warna background dari sebuah elemen pada halaman web ketika pengguna melakukan klik pada sebuah tombol. Dalam hal ini, kita dapat menggunakan DOM untuk mengubah nilai dari properti style pada elemen tersebut.

Berikut adalah contoh kode HTML dan JavaScript sederhana untuk mengubah warna background dari sebuah elemen ketika pengguna melakukan klik pada sebuah tombol:

HTML:

<div id="myDiv">Ini adalah elemen dengan warna background biru</div>

<button onclick="changeColor()">Ubah warna background</button>

JavaScript:

function changeColor() {

  var myDiv = document.getElementById("myDiv");

  myDiv.style.backgroundColor = "red";

}

Dalam contoh di atas, ketika pengguna melakukan klik pada tombol "Ubah warna background", fungsi changeColor() akan dijalankan. Fungsi tersebut akan mengambil elemen dengan id "myDiv" menggunakan metode document.getElementById() yang merupakan bagian dari DOM, lalu mengubah nilai dari properti style.backgroundColor pada elemen tersebut menjadi "red". Sehingga, warna background dari elemen tersebut akan berubah menjadi merah.