Sunday, December 1, 2013
Pada kesempatan kali ini saya akan menjabarkan sedikit tentang DOM atau yang kita kenal sebagai Document Object Model. Kenapa saya mengambil tema ini, karena saya salah menggunakan DOM dan akhirnya program saya tidak berjalan dan untuk menemukan kesalah sekecil ini menghabiskan umur saya sekitar 4 jam. -_- . Okee, kita mulai dari pengertian.
A. Pengertian
Menurut wikipedia Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.B. Sejarah
Sejarah perkembangan Dom menurut wikipedia adalah W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.C. Metode Penggunaan DOM
1. Finding HTML Elements| Method | Description |
|---|---|
| document.getElementById() | Finding an element by element id |
| document.getElementsByTagName() | Finding elements by tag name |
| document.getElementsByClassName() | Finding elements by class name |
| document.forms[] | Finding elements by HTML element objects |
2. Changing HTML Elements
| Method | Description |
|---|---|
| document.write(text) | Writing into the HTML output stream |
| document.getElementById(id).innerHTML= | Changing the inner HTML of an element |
| document.getElementById(id).attribute= | Changing the attribute of an element |
| document.getElementById(id).style.attribute= | Changing the style of an HTML element |
3. Adding and Deleting Elements
| Method | Description |
|---|---|
| document.createElement() | Create an HTML element |
| document.removeChild() | Remove an HTML element |
| document.appendChild() | Add an HTML element |
| document.replaceChild() | replace an HTML element |
4. Adding Events Handlers
| Method | Description |
|---|---|
| document.getElementById(id).onclick=function(){code} | Adding event handler code to an onclick event |
Nah, semoga dengan penjabaran ini, teman-teman pembaca dapat memahami bagaimana penggunaan DOM, dan saya harap tidak membuang umur selama 4 jam ntuk menemukan kesalahan dalam pembuatan program menggunakan DOM. -_-
Penulis :
Devo Frihandana
Twitter :
@devofrihandana
