Html Dom Pendahuluan
Apa itu DOM?
Document Object Model (DOM) ialah suatu platform and language-neutral interface yang memperbolehkan jadwal dan script secara dinamis untuk mengakses dan mengupdate isi (content), struktur (structure), dan style dari suatu dokumen.
DOM terbagi atas 3 level:
- CORE DOM – Level cara standard DOM mengakses dan memanipulasi dokumen terstruktur.
- XML DOM – Level cara standard DOM untuk mengakses dan memanipulasi dokumen XML.
- HTML DOM – Level cara standard DOM untuk mengakses dan memanipulasi dokumen HTML.
HTML DOM dapat dikatakan terminologi bagaimana cara standard DOM untuk mendapat (get), mengubah (change), menambahkan (add), atau menghapus (delete) isi di dalam dokumen HTML dengan dukungan bahasa scripting, semisal JavaScript.
Node
Bagi DOM segala sesuatu di dalam dokumen HTML ialah node, dan ibarat berikut:
- Untuk dokumen HTML, DOM menamainya Document node.
- Setiap elemen HTML, DOM menamainya Element node.
- Setiap teks dari elemen HTML, DOM menamainya Text node.
- Setiap atribut HTML, DOM menamainya Attr node.
- Setiap komentar, DOM menamainya Comment node.
Contoh suatu dokumen HTML:
Berdasar dokumen HTML di atas:
- Root node dari semua node (kecuali <HTML>) ialah <HTML> node.
- <HTML> node memiliki dua Child node, yaitu <HEAD> node dan <BODY> node.
- <HEAD> node berisi satu Child node, yaitu <TITLE> node. Di dalam <HEAD> node dapat saja berisi lebih dari satu node, contohnya <BASE> node, <LINK> node, <SCRIPT> node, dll.
- <BODY> node berisi dua Child node, yaitu <H1> node dan <P> node.
Teks dari suatu elemen disimpan dalam Text node, sebagai pola untuk:
Untuk <TITLE> node berisi Text node yang nilainya ialah "Tutorial DOM". Untuk teks "Tutorial DOM" bukanlah nilai dari <TITLE> node, melainkan nilai dari Text node. Di HTML DOM, anda dapat mengakses nilai dari Text node via properti innerHTML.
Di bawah ini pola mengembalikan nilai dari Text node di dalam elemen TITLE via properti innerHTML
: