Pengertian DOM (Document Object Model)
Merupakan singkatan dari Document Object Model. Ia adalah suatu konsep atau cara logis untuk merepresentasikan struktur suatu dokumen dan bagaimana dokumen itu diakses serta dimodifikasi dalam bentuk pohon.
Dan juga dengan DOM, kita bisa mengakses, mengubah, mendelete suatu dokumen (atau tag) dalam HTML. Dan di dalam web, kita bisa melakukannya menggunakan Javascript dengan relatif mudah. Apalagi DOM selalu tersusun dalam bentuk tree, sehingga melakukan traversing antar nodes relatif mudah.
Baca juga : Pengertian dan Fungsi JavaScript
Sejarah Singkat DOM
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.
Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML yang dapat diilustrasikan dengan bentuk pohon seperti di bawah ini:
Di tingkat paling dasar, situs sebuah web terdiri atas dokumen HTML serta CSS. HTML DOM adalah model objek standar dan antarmuka pemrograman untuk HTML. Ini mendefinisikan :
- Elemen HTML sebagai objek
- Properti dari semua elemen HTML
- Metode untuk mengakses semua elemen HTML
- Peristiwa untuk semua elemen HTML
Nah itu dia tentang Sejarah dan Tree Objects DOM serta definisi model antar muka HTML DOM.
Artikel Terkait :
- Apa itu HTML? Pengertian dan Sejarah HTML
- DASAR DASAR MENGGUNAKAN HTML
- PENJELASAN SEDERHANA APA ITU HTML, CSS, JAVASCRIPT
- Markup: HTML Tags
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 |
We Are Open IT Training Lets Join Now!
~ Powercode Technology Solutions
