Website Pribadi Dian Wahyudi & Kumpulan Artikel, Tutorial, Tips, Download

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

<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
   <h1>Ubah Warna Halaman dengan DOM</h1>
   <input type="button" name="merah" onclick="ubahMerah()" value="Ubah Jadi Merah" />
   <input type="button" name="merah" onclick="ubahKuning()" value="Ubah Jadi Kuning" />
   <input type="button" name="merah" onclick="ubahHijau()" value="Ubah Jadi Hijau" /> 
</body>
</html>

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