Categories: Artikel HTML DOM

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:

<HTML> <HEAD> <TITLE>Tutorial DOM</TITLE> </HEAD> <BODY> <H1>Pelajaran DOM yang pertama!</H1> <P>Halo Dunia!</P> </BODY> </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:

<TITLE>Tutorial DOM</TITLE>

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:

<HTML> <HEAD> <TITLE>Tutorial DOM</TITLE> </HEAD> <BODY> <P ID="demo">Nilai First child elemen TITLE: <BUTTON ONCLICK="foo()">Klik</BUTTON></P> <SCRIPT TYPE="text/javascript"> function foo() { var Element = document.getElementsByTagName("TITLE")[0]; var Out = document.getElementById("demo"); Out.innerHTML = Element.innerHTML; } </SCRIPT> </BODY> </HTML>

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code