Home » Artikel HTML DOM » HTML DOM Pendahuluan

Monday, September 17, 2012

HTML DOM Pendahuluan

Apa itu DOM?
Document Object Model (DOM) adalah suatu platform and language-neutral interface yang memperbolehkan program 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 bisa dikatakan terminologi bagaimana cara standard DOM untuk mendapatkan (get), mengubah (change), menambahkan (add), atau menghapus (delete) isi di dalam dokumen HTML dengan bantuan bahasa scripting, semisal JavaScript.

Node
Bagi DOM segala sesuatu di dalam dokumen HTML adalah node, dan seperti 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>) adalah <HTML> node.
  • <HTML> node mempunyai dua Child node, yaitu <HEAD> node dan <BODY> node.
  • <HEAD> node berisi satu Child node, yaitu <TITLE> node. Di dalam <HEAD> node bisa saja berisi lebih dari satu node, misalnya <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 contoh untuk:

<TITLE>Tutorial DOM</TITLE>

Untuk <TITLE> node berisi Text node yang nilainya adalah "Tutorial DOM". Untuk teks "Tutorial DOM" bukanlah nilai dari <TITLE> node, melainkan nilai dari Text node. Di HTML DOM, anda bisa mengakses nilai dari Text node via properti innerHTML.

Di bawah ini contoh 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>
Posted by at