Objek dokumen DOM HTML adalah pemilik dari semua objek lain pada halaman web yang kita buat.
Section Artikel
Objek dokumen mewakili halaman web.
Jika ingin mengakses elemen apa pun di halaman HTML, maka selalu dimulai dengan mengakses objek dokumen.
Di bawah ini adalah beberapa contoh bagaimana kita dapat menggunakan objek dokumen untuk mengakses dan memanipulasi kode HTML.
| Method | Deskripsi |
|---|---|
| document.getElementById(id) | Temukan elemen dengan id elemen |
| document.getElementsByTagName(name) | Temukan elemen dengan nama tag |
| document.getElementsByClassName(name) | Temukan elemen berdasarkan nama kelas |
| Properti | Deskripsi |
|---|---|
| element.innerHTML = new html content | Ubah HTML bagian dalam sebuah elemen |
| element.attribute = new value | Ubah nilai atribut elemen HTML |
| element.style.property = new style | Ubah style elemen HTML |
| Method | Deskripsi |
| element.setAttribute(attribute, value) | Ubah nilai atribut elemen HTML |
| Method | Deskripsi |
|---|---|
| document.createElement(element) | Buat elemen HTML |
| document.removeChild(element) | Hapus elemen HTML |
| document.appendChild(element) | Tambahkan elemen HTML |
| document.replaceChild(new, old) | Ganti elemen HTML |
| document.write(text) | Menulis output stream HTML |
| Method | Deskripsi |
|---|---|
| document.getElementById(id).onclick = function(){code} | Menambahkan kode event handler ke event onclick |
HTML DOM Level 1 (1998) pertama, mendefinisikan 11 objek HTML, kumpulan objek, dan properti. DOM level 1 masih valid di HTML5.
Kemudian, di HTML DOM Level 3, lebih banyak objek, koleksi, dan properti ditambahkan.
| Property | Deskripsi | DOM |
|---|---|---|
| document.anchors | Mengembalikan semua elemen <a> yang memiliki atribut nama | 1 |
| document.applets | Mengembalikan semua elemen <applet> (Tidak digunakan lagi di HTML5) | 1 |
| document.baseURI | Mengembalikan URI dasar absolut dokumen | 3 |
| document.body | Mengembalikan elemen <body> | 1 |
| document.cookie | Mengembalikan cookie dokumen | 1 |
| document.doctype | Mengembalikan doctype dokumen | 3 |
| document.documentElement | Mengembalikan elemen <html> | 3 |
| document.documentMode | Mengembalikan mode yang digunakan oleh browser | 3 |
| document.documentURI | Mengembalikan URI dokumen | 3 |
| document.domain | Mengembalikan nama domain dari server dokumen | 1 |
| document.domConfig | Usang. Mengembalikan konfigurasi DOM | 3 |
| document.embeds | Mengembalikan semua elemen <embed> | 3 |
| document.forms | Mengembalikan semua elemen <form> | 1 |
| document.head | Mengembalikan elemen <head> | 3 |
| document.images | Mengembalikan semua elemen ,img> | 1 |
| document.implementation | Mengembalikan implementasi DOM | 3 |
| document.inputEncoding | Mengembalikan pengkodean dokumen (set karakter) | 3 |
| document.lastModified | Mengembalikan tanggal dan waktu dokumen diperbarui | 3 |
| document.links | Mengembalikan semua elemen <area> dan <a> yang memiliki atribut href | 1 |
| document.readyState | Mengembalikan status (loading) dokumen | 3 |
| document.referrer | Mengembalikan URI perujuk (dokumen yang menghubungkan) | 1 |
| document.scripts | Mengembalikan semua elemen <script> | 3 |
| document.strictErrorChecking | Kembali jika pemeriksaan kesalahan diberlakukan | 3 |
| document.title | Mengembalikan elemen <title> | 1 |
| document.URL | Menampilkan URL lengkap dokumen | 1 |