Apa Hubungan Javascript dan DOM ?

posted Nov 21, 2011, 8:53 AM by Editor KursusInternet   [ updated Nov 21, 2011, 6:38 PM ]

Javascript dan DOM

Bagi kita yang baru belajar Javascript dengan menggunakan web browser, sering sekali terjebak bahwa elemen atau komponen HTML yang digunakan pada scripting adalah objek Javascript padahal sebenarnya bukan.

Elemen-elemen HTML yang diakses oleh Javascript adalah objek tersendiri yang dikenali oleh browser dan merupakan bagian dari Document Object Model atau sering disingkat dengan DOM. Javascript sendiri berperan dalam memanipulasi objek DOM

Dengan penggunaan Javascript yang tepat dan kreatif terhadap DOM, kita dapat menghasilkan interaksi yang sangat "hidup" dan dinamis antara pengguna dengan browser pada saat menjelajah situs web. 

Dengan demikian, pengetahuan akan DOM ini sangat penting bagi seorang web developer yang berurusan dengan Javascript.

Document Object Model (DOM)

Jika kita memiliki dua combo box pada form di halaman html kita, dan kita ingin memanipulasi combo box yang kedua... bagaimana caranya ?

Untuk melakukan hal tersebut tentunya kita harus memiliki suatu konvensi nama yang merujuk pada komponen yang dimaksud dan kemudian mengolahnya. Misalkan nama tersebut adalah referensi dari atribut id dan urutan dari komponen yang dimaksud.

Nah, hal-hal tersebut dirinci secara spesifik di dalam Document Object Model (DOM). DOM dengan demikian bisa disimpulkan sebagai interface dari tiap browser yang digunakan untuk merujuk elemen-elemen tertentu pada halaman web / HTML. 

Struktur objek-objek DOM biasanya bersifat hierarkis karena banyak elemen HTML adalah "anak" atau bagian dari elemen lainnya. Sebagai contoh, elemen text input adalah anak dari elemen form.

Struktur DOM

Struktur DOM sangat erat kaitannya dengan susunan struktur elemen-elemen pada dokumen HTML dan XML. Hanya saja elemen-elemen tersebut "diterjemahkan" sebagai objek yang memiliki atribut / properti tertentu.

Sebagai contoh berikut adalah contoh komposisi beberapa elemen HTML.

        <div>             <span>                 Halo             </span>             <span>                 <font color="blue">Internet</font>saq             </span>         </div>

Dan representasi struktur tersebut pada DOM adalah terlihat pada gambar berikut. Tiap kotak merupakan perwakilan objek / node dari  struktur DOM.


Mengakses Objek DOM

Untuk berbagai browser modern saat ini, objek teratas dari struktur DOM adalah Document. Dan kita dapat mengambil referensi dan mengakses berbagai objek lainnya pada halaman HTML dengan objek ini.

Document secara standar memiliki dua method untuk mengambil referesi dari objek HTML, yaitu :
  • getElementById : berfungsi mengambil objek tunggal dengan pengenal berupa atribut id dari objek tersebut.
  • getElementsByTagName : berfungsi mengembalikan daftar node (objek Nodelist) dari elemen-elemen dengan nama tag tertentu.

Contoh Penggunaan DOM dengan Javascript

Berikut adalah beberapa contoh kode javascript penggunaan akses DOM dengan penggunaan method getElementsById dan hasil eksekusinya.



    <html>     <head>         <title>Contoh Penggunaan DOM</title>     </head>     <body>     <div>         <span id="pertama">             Halo         </span>         <span>             <font color="blue">Internet</font>         </span>     </div>     <script type="text/javascript">         alert(document.getElementById("pertama"));     </script>     </body>     </html>

Hasil Eksekusi dengan Google Chrome :




Contoh di atas akan mengakses elemen HTML dengan atribut ID dan kemudian menampilkan nama objek DOM terkait, yaitu objek HTMLSpanElement. 

Dan contoh berikut menampilkan isi teks HTML dari objek tersebut dengan menggunakan property innerHTML.



    <html>     <head>     <title>Contoh Penggunaan DOM</title>     </head>     <body>     <div>         <span id="pertama">             Halo         </span>         <span>             <font color="blue">Internet</font>         </span>     </div>     <script type="text/javascript">         alert(document.getElementById("pertama").innerHTML);     </script> </body> </html>

Hasil Eksekusi dengan Google Chrome :




Dua contoh berikut ini adalah penggunaan getElementsByTagName.


    <html>     <head>         <title>Contoh Penggunaan DOM</title>     </head>     <body>     <div>         <span id="pertama">             Halo         </span>         <span>             <font color="blue">Internet</font>         </span>     </div>     <script type="text/javascript">         alert(document.getElementsByTagName("span"));     </script> </body> </html>

Hasil Eksekusi dengan Google Chrome :




Dan ini cara mengakses property innerHTML dari tiap elemen span.


<html> <head> <title>Contoh Penggunaan DOM</title> </head> <body> <div> <span id="pertama"> Halo </span> <span> <font color="blue">Internet</font> </span> </div> <script type="text/javascript"> for(i=0; i< document.getElementsByTagName("span").length;i++) alert(document.getElementsByTagName("span")[i].innerHTML); </script> </body> </html>

Hasil Eksekusi dengan Google Chrome :






Sumber Referensi

Comments