DOM pada Javascript

Dalam artikel ini saya akan coba bahas mengenai DOM di Javascript.
DOM di sini merupakan singkatan dari Document Object Model. DOM adalah
standard atau platform terbaru dari W3C (World Wide Web Consortium)
yang memungkinkan untuk mengakses dan mengupdate dokumen HTML secara
dinamis. Tidak hanya konten dokumen saja yang bisa diakses dan diupdate
dengan DOM namun juga struktur beserta stylenya.

Untuk menjembatani HTML dengan DOM, di dalam Javascript sudah mulai mendukung platform DOM ini.

Konsep DOM dalam Javascript adalah memandang elemen dokumen sebagai
suatu object. Seperti halnya konsep OOP, object ini bisa memuat method
dan properties. Selanjutnya untuk pemrosesan object-object dalam
dokumen HTML menggunakan method dan properties tersebut.

Sebagai gambaran aplikasi yang menggunakan DOM, perhatikan contoh dokumen HTML berikut ini

Dokumen HTML di atas mengincludekan Javascript yang terletak dalam file script.js

script.js

function ubahMerah()
{
  document.body.style.backgroundColor="red";
}

function ubahKuning()
{
  document.body.style.backgroundColor="yellow";
}

function ubahHijau()
{
  document.body.style.backgroundColor="green";
}

OK.. dalam contoh ini, kita akan membuat aplikasi yang memungkinkan
user untuk dapat mengubah warna background melalui tombol-tombol yang
disediakan. Untuk mengimplementasikan hal ini kita akan menggunakan DOM.

Dalam halaman HTML terdapat tiga buah tombol untuk mengubah warna
yaitu tombol pertama untuk mengubah warna background menjadi merah,
tombol kedua untuk mengubah menjadi kuning dan hijau untuk yang ketiga.

Pada tombol pertama, diberikan event onclick yang selanjutnya akan
memanggil function ubahMerah(). Maksudnya adalah bila tombol ini diklik
maka akan mentrigger function ubahMerah(). Hal yang sama juga diberikan
pada tombol kedua dan ketiga.

Now.. let’s see the inside of Javascript.

Kita lihat function ubahMerah(). Dalam function ini terdapat perintah

document.body.style.backgroundColor="red";

Perintah tersebut digunakan untuk mengubah style warna background
pada dokumen. Untuk mengubah warna background dokumen dengan konsep
DOM, kita menggunakan object ‘document’.

Karena pada dasarnya apa yang tampil pada jendela browser adalah
bagian body pada dokumen HTML, maka kita akses properti ‘body’.
Selanjutnya… kita akan mengubah style body khususnya pada warna
background. Untuk mengubahnya kita akses properti
’style.backgroundColor’.

Konsep yang sama kita terapkan pada function ubahKuning() dan ubahKuning().

Anda dapat mengetahui lebih dalam tentang konsep DOM ini dengan
mempelajari beberapa object-object yang lain, serta method dan properti
apa saja yang dapat Anda gunakan. Saya sangat merekomendasikan
W3Schools.com untuk tempat belajar konsep DOM ini. Untuk lebih
jelasnya, silakan kunjungi http://www.w3schools.com/HTMLDOM.

Mudah-mudahan kali lain saya bisa membahas contoh-contoh aplikasi lain menggunakan DOM ini.

Thanks to : blog.rosihanari.net