Rabu, 27 November 2013

Contoh Document Object Model


Contoh Penggunaan DOM
 
<html>
<head>
<title>
DOM </title>
</head>
<body>
<div>

<span id="satu">
Hallo Kalbis Institute
</span>
<span>
<font color
="red"> </font>
</span>
</div>
<script type
="text/javascript">
alert(document.getElementById("satu"));
</script>
</body>
</html>

Contoh Penggunaan DOM dalam web

<html>
<body>
<script>
function gantiGambar()
{
element=document.getElementById('gambarku')
if (element.src.match("bulbon"))
{
element.src="gambar_flora.gif";
}
else
{
element.src="gambar_fauna.gif";
}
}
</script>
<img id="gambarku" onclick="gantiGambar()" border="0" src="gambar_flora.gif" width="100" height="180">
<p>Klik yang ini</p>

</body>
</html>


Document Object Model



Document Object Model (DOM) mulai dikembangkan oleh W3C pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan.
Document Object Model (DOM) adalah objek model standar untuk HTML dan XML yang bersifat platform independent.DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan begitu, DOM adalah cara JavaScript melihat suatu halaman HTML.
DOM bukan cara yang tercepat atau termudah untuk digunakan, tetapi DOM adalah cara yang paling banyak dipakai oleh sebagian besar bahasa pemrograman web misalnya PHP, Javascript dan Python.

1. HTML DOM

Model Objek Standar untuk HTML
objek dan properti dari semua elemen HTML dan ada mehod2 untuk mengakses semua elemen tersebut.

2. XML DOM

Sebuah standar untuk mengakses dan memanipulasi XML.
View dari Dokumen XML adalah seperti struktur pohon. Konten dari XML berupa teks dan atribut2 dapat dimodifikasi dan dihapus atau dapat dibuat elemen baru. Elemen-elemennya adalah teks dan atribut dikenal dengan Node.

Mengakses Element DOM dengan menggunakan Javascript.
Untuk mengakses element HTML dengan menggunakan Javascript dengan menggunakan beberapa perintah di bawah ini :
* document.getElementById('id_element') - dengan perintah ini Kita akan mendapatkan objek dari element yang dimaksud secara langsung
 * document.getElementsByTagName('NAMA_TAG') - dengan perintah ini Kita akan mendapatkan array dari semua objek pada halaman yang memiliki nama tag sesuai dengan parameter yang dimasukan.



Refrensi dari W3 School, Google