Pada postingan saya sebelumnya, saya sedikit menyinggung mengenai Document Object Model atau sering disebut dengan DOM. Lalu apakah yang disebut dengan DOM itu sendiri? Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.
DOM adalah cara standar untuk merepresentasikan (menampilkan) dokumen-dokumen XML termasuk XHTML (XHTML termasuk dalam turunan dari XML). Standar ini dibuat oleh W3C (World Wide Web Consortium). Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web. Tetapi sekarang semua browser modern sudah compatible dengan standar DOM yang dibuat oleh W3C.
Walaupun DOM bukan merupakan cara yang tercepat, teringan, atau paling mudah untuk digunakan tetapi DOM adalah cara yang paling banyak dipakai oleh sebagian besar bahasa pemrograman web misalnya PHP, Javascript, Python, dan sebagainya. DOM dirancang sedemikian rupa sehingga lebih intuitif bagi programmer untuk menelusuri/mengekplorasi hierarki elemen dalam dokumen XML.
Walaupun DOM bukan merupakan cara yang tercepat, teringan, atau paling mudah untuk digunakan tetapi DOM adalah cara yang paling banyak dipakai oleh sebagian besar bahasa pemrograman web misalnya PHP, Javascript, Python, dan sebagainya. DOM dirancang sedemikian rupa sehingga lebih intuitif bagi programmer untuk menelusuri/mengekplorasi hierarki elemen dalam dokumen XML.
Berikut ini contoh penggunaan DOM menggunakan javascript menggunakan function getElementById().
<head>
<script type="text/javascript">
function getHTMLText()
{
var x=document.getElementById(" elem1 ");
alert(x.innerHTML);
}
</script>
</head>
<body>
<a href="#" id="elem1" onclick="getHTMLText()">Klik di sini!</a>
</body>
</html>
Selain menggunakan getElementById(), kita juga bisa menggunakan getElementByTagName() untuk mengakses elemen DOM. Dengan menggunakan framework javascript seperti JQuery, kita bisa mengakses elemen DOM dengan cara yang lebih mudah dan sederhana.
Membaca DOM
Membaca DOM bisa kita analogikan seperti kita membaca pohon keluarga atau silsilah keluarga kita. Istilah-istilah yang digunakan pun juga hampir sama. Jika dalam pohon keluarga kita menggunakan istilah orangtua, anak, saudara kandung, dsb maka dalam DOM kita menggunakan istilah node, parents, children, siblings, dsb. Dalam DOM, hanya ada satu parent utama atau biasa disebut root node atau root element, yang berisi petunjuk kepada children dari root node tersebut. Begitu juga sebaliknya.Setiap obyek atau elemen dalam XML disebut sebagai node yang mempunyai tipe yang berbeda-beda seperti text atau dokumen. Berikut di bawah ini adalah contoh untuk lebih mempermudah pemahaman tentang DOM:
<body>
<span>Saya</span> sedang membaca buku <strong>komputer</strong></body>Penjelasan:
- Tag body adalah root node.
- Tag body mempunyai beberapa children yaitu:
- <span>Saya</span>
- sedang membaca buku
- <strong>komputer</strong>
- <span>Saya</span> ber-siblings dengan sedang membaca buku dan <strong>komputer</strong> dan begitu juga sebaliknya.
No comments:
Post a Comment