Mengenal JavaScript DOM

January 23rd, 2011 • Related • Filed Under

Dokumen web ( HTML ) memiliki konten yang dapat diakses dan dapat dilakukan manipulasi, konten web ini dapat diakses dengan menggunakan Document Object Model ( DOM ), karena dokumen web sesungguhnya adalah terdiri atas  konten-konten yang berisi object object.

Hirarki dari object dari dokumen HTML adalah sebagai berikut :

  1. Object Window  : Hirarki paling atas dinyatakan sebagai object bernama window
  2. Object Document : Semua konten body yang dimunculkan pada object bernama document
  3. Object Form : Adalah konten dokumen berupa form mulai dari tag <form> hingga </form>
  4. Object Elemen Form : Object-object didalam object Form berupa elemen-elemen form seperti Text Input, Select Box, TextArea, Button dan elemen form lainnya .

Berikut contoh bagaimana mengakses konten dokumen dengan menggunakan DOM , dengan contoh sederhana mengakses sebuah tag HTML <SPAN> dengan diberi ID=area dan mengubah warna text menjadi merah ketika mouse melintas pada area <SPAN>.

<head>
<title>Belajar DOM</title>
<script language="javascript">

function makeRed()
{
var obj = document.getElementById('area');
obj.style.color="red";
}

</script>
</head>

Sintaks document.getElementById() digunakan untuk mengambil object yang ada pada Object document yang beinisial ID=area


<body>

<span style="color:green" id="area" onMouseOver="makeRed()">
Memulai Belajar JavaScript Document Object Model
</span>

</body>

Anda juga dapat mengambil object konten web berdasarkan jenis TAG HTML nya, dengan menggunakan sintaks document.getElementsByTagName() , berikut contoh penggunaannya :

function makeBlue()
{
var obj = document.getElementsByTagName('span');
// diasumsikan adalah tag span yang pertama setelah tag <body>
obj[0].style.color="blue";
}

Edit file pada body dokumen menjadi :

<body>
<span style="color:green" id="area" onMouseOver="makeRed()" onMouseOut="makeBlue()">
Memulai Belajar JavaScript Document Object Model
</span>
</body>

Post a Response