Home » Javascript » Dokumen DOM JavaScript: Contoh dan Cara Membuatnya

Dokumen DOM JavaScript: Contoh dan Cara Membuatnya

by Catur Kurnia Sari
by Catur Kurnia Sari

Objek dokumen DOM HTML adalah pemilik dari semua objek lain pada halaman web yang kita buat.

Objek Dokumen HTML DOM

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.

Menemukan Elemen HTML

MethodDeskripsi
document.getElementById(id)Temukan elemen dengan id elemen
document.getElementsByTagName(name)Temukan elemen dengan nama tag
document.getElementsByClassName(name)Temukan elemen berdasarkan nama kelas

Mengubah Elemen HTML

PropertiDeskripsi
element.innerHTML =  new html contentUbah HTML bagian dalam sebuah elemen
element.attribute = new valueUbah nilai atribut elemen HTML
element.style.property = new styleUbah style elemen HTML
MethodDeskripsi
element.setAttribute(attribute, value)Ubah nilai atribut elemen HTML

Menambah dan Menghapus Elemen

MethodDeskripsi
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

Menambahkan Event Handler

MethodDeskripsi
document.getElementById(id).onclick = function(){code}Menambahkan kode event handler ke event onclick

Menemukan Objek HTML

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.

PropertyDeskripsiDOM
document.anchorsMengembalikan semua elemen <a> yang memiliki atribut nama1
document.appletsMengembalikan semua elemen <applet> (Tidak digunakan lagi di HTML5)1
document.baseURIMengembalikan URI dasar absolut dokumen3
document.bodyMengembalikan elemen <body>1
document.cookieMengembalikan cookie dokumen1
document.doctypeMengembalikan doctype dokumen3
document.documentElementMengembalikan elemen <html>3
document.documentModeMengembalikan mode yang digunakan oleh browser3
document.documentURIMengembalikan URI dokumen3
document.domainMengembalikan nama domain dari server dokumen1
document.domConfigUsang. Mengembalikan konfigurasi DOM3
document.embedsMengembalikan semua elemen <embed>3
document.formsMengembalikan semua elemen <form>1
document.headMengembalikan elemen <head>3
document.imagesMengembalikan semua elemen ,img>1
document.implementationMengembalikan implementasi DOM3
document.inputEncodingMengembalikan pengkodean dokumen (set karakter)3
document.lastModifiedMengembalikan tanggal dan waktu dokumen diperbarui3
document.linksMengembalikan semua elemen <area> dan <a> yang memiliki atribut href1
document.readyStateMengembalikan status (loading) dokumen3
document.referrerMengembalikan URI perujuk (dokumen yang menghubungkan)1
document.scriptsMengembalikan semua elemen <script>3
document.strictErrorCheckingKembali jika pemeriksaan kesalahan diberlakukan3
document.titleMengembalikan elemen <title>1
document.URLMenampilkan URL lengkap dokumen1

You may also like