Section 07 DOM (Document Object Model)

By


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.
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.
DHTML atau Dynamic HTML, bukanlah suatu bahasa pemrograman melainkan merupkan suatu istilah untuk membuat halaman webyang dinamis dan interaktif dengan mengkombinasikan bahasa markah HTML, JavaScript, Document Object Model, dan CSS.[1]
DHTML (Dynamic HTML)
HTML.svg
DHTML mengizinkan skrip bahasa pemrograman untuk diubah menjadi variabel-variabel pada setiap pendefenisian bahasa pemrograman halaman web, yang menghasilkan efek perubahan tampilan beserta dengan fungsi-fungsinya setelah halaman web ditampilkan. Berbeda dengan HTML, yang memiliki kemampuan menghasilkan dan mengolah halaman web sebelum ditampilkan.
DHTML biasanya digunakan untuk membuat tombol rollover ataupun menu drop-down dan halaman web yang interaktif.
Beberapa teknologi aplikasi penjelajah webmemiliki tingkat dukungan terhadap DHTML yang berbeda-beda sehingga sangat sulit dikembangkan. Seperti misalnya variasi dan kombinasi ukuran layar bisa menampilkan dengan baik pada beberapa aplikasi penjelajah web sedangkan yang lainnya tidak. Pengembangan terbaru yang relatif setiap aplikasi penjelajah web seperti Internet Explorer 5.0+, Mozilla Firefox 2.0+, dan Opera7.0+ sudah manambahkan Document Object Model. tes
Pada dasarnya sebuah halaman web diatur seperti cara berikut ini:
<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>DHTML example</title>
     </head>
     <body>
          <div id="navigation"></div>

          <script> 
               var init = function () {
                    myObj = document.getElementById("navigation");
                    // ... manipulate myObj
               };
               window.onload = init;
          </script>

          <!--
      Walaupun kode tersebut disimpan pada file eksternal; ini bisa diselesaikan dengan membuat pranala file yang mengandung JavaScript. 
      Hal ini berguna jika menggunakan skrip pemrograman yang sama pada beberapa [[halaman web]]:
          -->
          <script src="myjavascript.js"></script>
     </body>
</html>Kode berikut menggambarkan fungsi yang paling sering digunakan. Bagian tambahan pada sebuah halaman web hanya akan ditampilkan jika pengguna menginginkannya.
<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>Cara menggunakan fungsi DOM</title>
          <style>
               a {background-color:#eee;}
               a:hover {background:#ff0;}
               #contoh1 {background:#cfc; display:none; margin:30px 0; padding:1em;}
          </style>
     </head>
     <body>
          <h1>Cara menggunakan fungsi DOM</h1>

          <h2><a id="tampilkansembunyikan" href="#">Tampilkan contoh</a></h2>

          <p id="contoh1">Ini adalah sebuah contoh.
      (Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...</p>

          <p>Lanjutan teks...</p>

          <script>
               changeDisplayState = function (id) {
                    var d = document.getElementById('tampilkansembunyikan'),
                         e = document.getElementById(id);
                    if (e.style.display === 'none' || e.style.display === '') {
                         e.style.display = 'block';
                         d.innerHTML = 'Sembunyikan contoh';
                    }
                    else {
                         e.style.display = 'none';
                         d.innerHTML = 'Tampilkan contoh';
                    }
               };
               document.getElementById('tampilkansembunyikan').onclick = function () {
                    changeDisplayState('contoh1');
                    return false;
               };
          </script>
     </body>
</html>

Tidak ada komentar:

Posting Komentar