Document Object Model (DOM)

8
Pemrograman Web Kelas D 2010 DOM Document Object Model Junian Triajianto (5108100038)

description

Document Object Model (DOM)

Transcript of Document Object Model (DOM)

Page 1: Document Object Model (DOM)

DOMDocument Object Model

Junian Triajianto (5108100038)

2010Pemrograman Web Kelas D

Page 2: Document Object Model (DOM)

Document Object Model (DOM) adalah antarmuka yang

memungkinkan seseorang untuk mengakses dan memanipulasi konten

dari web (dokumen) dengan pendekatan pemrograman. DOM

menyediakan representasi terstruktur dan berorientasi objek dari

setiap elemen dan konten dalam halaman dengan method-method

untuk menerima dan mengatur property dari objek. DOM juga

menyediakan method untuk menambah dan menghilangkan objek,

sehingga akan lebih leluasa dalam pembuatan konten yang dinamis.

DOM juga menyediakan interface untuk mengatur event, sehingga

memungkinkan sesorang untuk menangkap dan merespon kepada user atau aksi browser.

Level dan Dukungan DOM

Pertama kali JavaScript diperkenalkan dalam browser, beberapa interface dibutuhkan untuk

memperbolehkan elemen pada halaman web untuk bisa diakses dengan script. Setiap vendor

memiliki implementasi sendiri tetapi de facto standar dimunculkan untuk menghasilkan model

sederhana yang sesuai untuk kalangan umum.

Untuk saat ini, hampir seluruh vendor mulai mengadaptasi DOM standar yang dibuat oleh World

Wide Web Consortium (W3C), terutama Internet Explorer, Netscape, dan Opera. Dalam penyediaan

beberapa kompabilitas ke belakang, berbagai tingkatan, standar DOM ditetapkan. Mulai dari DOM

Level 0 (atau “dom0”) yang sesuai dengan model browser lama, seperti Internet Explorer dan

Netscape versi 4. Kemudian ada DOM1 yang dibuat standar-nya pada tahun 1998. Saat ini W3C telah

mengeluarkan tiga buah rekomendasi untuk DOM yaitu DOM Level 1, DOM Level 2 dan DOM Level

3.

Untuk memanipulasi dokumen dengan DOM, suatu parser akan membentuk representasi logik dari

bagian isi dokumen XML dalam bentuk struktur pohon. DOM tidak menjelaskan bagaimana

melakukan parsing terhadap dokumen, pembuatan dokumen baru ataupun melakukan serialisasi

terhadap dokumen. Hal ini dikarenakan DOM adalah spesifikasi yang bebas bahasa. Untuk

melakukan fungsi-fungsi tersebut dibutuhkan DOM parser yang diimplementasikan kedalam

berbagai bahasa pemrograman tertentu seperti C, C++, atau Java. Beberapa contoh DOM parser

adalah Apache Xerces, Crimson, Oracle XML Parser for Java atau MsXML.

Page 3: Document Object Model (DOM)

Variasi DOM

Di dalam w3schools, ada tiga macam DOM yang bisa digunakan, yaitu model standar untuk berbagai

dokumen terstruktur (Core DOM), model standar untuk HTML (HTML DOM), dan model standar

untuk XML (XML DOM).

HTML DOM

HTML DOM bisa didefinisikan:

Standar model objek untuk HTML

Standar programming interface untuk HTML

Platform dan language-independent

Standar W3C

HTML DOM mendefiniskan object dan property dari seluruh elemen HTML dan method (interface)

untuk mengaksesnya. Dengan kata lain: HTML DOM adalah standar untuk menerima, mengubah,

menambah, atau menghapus elemen HTML.

Berdasarkan DOM, seluruh elemen HTML adalah Node yang nantinya akan disusun dengan

menggunakan struktur tree.

Aturan DOM menyatakan:

Seluruh dokumen adalah suatu node dokumen

Seluruh elemen HTML adalah suatu node elemen

Page 4: Document Object Model (DOM)

Teks dalam elemen HTML adalah node teks

Setiap atribut HTML adalah node atribut.

Komentar adalah node komentar

Contoh HTML DOM :

<html>

  <head>

    <title>DOM Tutorial</title>

  </head>

  <body>

    <h1>DOM Lesson one</h1>

    <p>Hello world!</p>

  </body>

</html>

Beberapa property HTML DOM:

x.innerHTML – nilai text dari x

x.nodeName – nama dari x

x.nodeValue – nilai dari x

x.parentNode - parent node dari x

x.childNodes – node-node child dari x

x.attributes - atribut dari x

Beberapa method HTML DOM:

x.getElementById(id) – mendapatkan elemen berdasarkan id

x.getElementsByTagName(name) – mendapatkan seluruh elemen sesuai tag name

x.appendChild(node) – memasukkan node child ke x

x.removeChild(node) – menghapus node child dari x

Page 5: Document Object Model (DOM)

XML DOM

XML DOM adalah:

model objek standar untuk XML

programming interface standar untuk XML

Platform dan language-independent

Standar W3C

XML DOM mendefinisikan objek dan property seluruh elemen XML dan method (interface) untuk

mengaksesnya. Dengan kata lain: XML DOM adalah standar untuk mendapatkan, mengubah,

menambah, atau menghapus elemen XML.

Contoh XML DOM:

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="cooking">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

</book>

<book category="children">

Page 6: Document Object Model (DOM)

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

<book category="web">

<title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<year>2003</year>

<price>49.99</price>

</book>

<book category="web" cover="paperback">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>

</book>

</bookstore>

Aktivitas pengembangan DOM di W3C sudah ditutup sejak tahun 2004 dengan lengkapnya

pengembangan DOM Level 3 Recommendations. Tapi saat ini W3C Web Applications Working Group

sudah mulai bergerak untuk melakukan revisi.