Pengaksesan obyek pada halaman web

Pengaksesan Obyek Pada Halaman Web
Setiap elemen HTML yang ada dalam suatu dokumen web oleh Javascript diterjemahkan sebagai obyek HTML. Pada obyek HTML ini terdapat sejumlah fungsi, konstanta ataupun variabel yang dapat diakses untuk mengubah elemen HTML tersebut. Akses terhadap obyek HTML tersebut dapat dilakukan dengan menggunakan fungsi-fungsi berikut

Ketiga fungsi diatas merupakan bagian dari obyek document. Sehingga obyek document perlu disertakan pada saat memanggil fungsi diatas. Contoh : penggunaan fungsi getElementById()


<input type="text" id="nilai" />
<input type="button" id="btnAmbilNilai" value="Ambil nilai"
onclick="ambilNilai();" />
<script>
function ambilNilai(){
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
alert("nilainya adalah " + n);
}
</script>

Pada contoh diatas ini apabila tombol Ambil nilai diklik, maka obyek input nilai akan diambil menggunakan fungsi document.getElementById() dan selanjutnya, variabel value dari obyek nilai digunakan untuk mengambil data masukkan dari  user agar dapat ditampilkan.
 

Contoh : penggunaan fungsi getElementsByName().

<input type="text" name="nilai" />
<input type="button" id="btnAmbilNilai" value="Ambil nilai"
onclick="ambilNilai();" />
<script>
function ambilNilai(){
var objNilai = document.getElementsByName('nilai')[0];
var n = objNilai.value;
alert("nilainya adalah " + n);
}
</script>

Fungsi getElementsByName() sedikit berbeda dengan metode getElementById(), dimana hasil dari metode ini adalah array obyek bukan obyek tunggal. Dengan hasil berupa array ini berarti untuk mengakses elemen pertama digunakan index 0. Disisi lain, dengan hasil array ini dimungkinkan untuk menuliskan elemen HTML dengan nilai atribut name yang sama. Berikut ini merupakan contoh penggunaan fungsi getElementsByName() dengan elemen yang memiliki nama sama lebih dari satu

<input type="text" name="nilai" />
<input type="text" name="nilai" />
<input type="button" id="btnAmbilNilai" value="Ambil nilai"
onclick="ambilNilai();" />
<script>
function ambilNilai(){
var obj1 = document.getElementsByName('nilai')[0];
var obj2 = document.getElementsByName('nilai')[1];
var n1 = obj1.value;
var n2 = obj2.value;
alert("nilai pertama adalah " + n1);
alert("nilai kedua adalah " + n2);
}
</script>

Hasilnya:

Selanjutnya untuk fungsi getElementsByTagName(), berikut ini diberikan contoh skripnya.

<input type="text" name="nilai" />
<input type="button" id="btnAmbilNilai" value="Ambil nilai"
onclick="ambilNilai();" />
<input type="text" name="hasil" />
<script>
function ambilNilai(){
// mengambil obyek input text pertama
var obj1 = document.getElementsByTagName('input')[0];
// mengambil obyek input button
var obj2 = document.getElementsByTagName('input')[1];
// mengambil obyek input text kedua
var obj3 = document.getElementsByTagName('input')[2];
// mengambil nilai input text pertama dan button
var s1 = obj1.value;
var s2 = obj2.value;
// menampilkan nilai pada input text kedua
obj3.value = s1 + s2;
}
</script>

Hasil akhir dari skrip ini mirip dengan contoh sebelumnya, hanya cara mengambil nilainya yang berbeda. Oleh karena tombol juga dibuat menggunakan tag <input> maka nilainya dapat diakses menggunakan fungsi ini. Berikutnya untuk obyek input text yang kedua digunakan untuk menampilkan isi dari input text pertama dan input button.