Tutorial: Berinteraksi dengan HTML Document Object Model Menggunakan Javascript

Document Object Model, atau DOM adalah istilah untuk element dalam file HTML. Element adalah kode HTML yang ditandai dengan Tag HTML seperti <head>, <div>, atau <input>. Dalam artikel ini kita akan menggunakan javascript untuk berinteraksi dengan DOM. Perhatikan contoh script berikut:

<!DOCTYPE html>  
<html>  
<body>

<p id="text">  
Ini adalah kalimat yang akan disembunyikan.  
</p>

<input type="button" id="tombol1" value="Sembunyikan Huruf">  
<input type="button" id="tombol2" value="Munculkan Huruf">

<script>

var tombol1 = document.getElementById("tombol1");  
var tombol2 = document.getElementById("tombol2");  
var text = document.getElementById("text");

tombol1.onclick = function() {  
  text.style.visibility = "hidden";
}

tombol2.onclick = function() {  
  text.style.display = "visible";
}

</script>

</body>  
</html>

Dalam contoh HTML diatas kita bisa melihat seluruh syntax Javascript berada dalam tag <script>, jika HTML tersebut dijalankan maka tampilannya seperti ini:
Terdapat dua buah tombol yang masing-masing berfungsi untuk menyembunyikan text dan memunculkannya kembali. Proses menyembunyikan ini dilakukan oleh javascript, sedangkan untuk tampilan text serta seluruh tombol ditampilkan oleh syntax HTML. Agar javascript dapat menyembunyikan text, hal pertama yang harus dilakukan adalah menentukan elemen mana saja pada html yang akan di proses oleh Javascript. Untuk dapat memilih element dengan menggunakan javascript dapat digunakan syntax getElementById. jika menggunakan syntax ini maka target elemen harus mempunyai id didalamnya.

Dalam contoh script, elemen <p> dan kedua <input> sudah memiliki id masing-masing text,tombol1, dan tombol2. selanjutnya buat tiga variabel dalam javascript dan buat nilai untuk masing-masing variabel tersebut dengan menggunakan getElementByID pada setiap elemen text dan tombol. Jadinya seperti ini:

var tombol1 = document.getElementById("tombol1");  
var tombol2 = document.getElementById("tombol2");  
var text = document.getElementById("text");  

Selanjutnya buat fungsi dimana ketika tombol diklik maka text akan menghilang :

tombol1.onclick = function() {  
  text.style.visibility = "hidden";
}

tombol1 merupakan variabel yang telah dibuat sebelumya, sedangkan syntax .onclick = function () berarti memberitahu bahwa ketika tombol1 di klik maka fungsi akan berjalan. Fungsi yang dijalankan adalah:

text.style.visibility = "hidden"  

text adalah variabel yang dibuat sebelumnya yang berfungsi untuk memilih elemen <p>. Sedangkan syntax style.visibility berfungsi untuk menentukan status text sebelumnya menjadi terlihat atau tidak, untuk menyembunyikan text dapat diberi nilai hidden, sedangkan untuk memunculkan kembali dapat menggunakan nilai visible.
Untuk membuat fungsi dimana ketika tombol diklik text menjadi terlihat kembali dapat menggunakan :

tombol2.onclick = function() {  
  text.style.display = "visible";
}

fungsi ini mirip dengan fungsi pada tombol sebelumnya, yang membedakan adalah variabel yang digunakan adalah tombol2 dan nilai dari style.display adalah visible.

Untuk mempelajari DOM secara lebih mendetail dapat dilihat di http://www.w3schools.com/js/js_htmldom.asp.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.