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.
Tabel 2. Fungsi untuk mengakses obyek HTML
|
Fungsi
|
Penjelasan
|
|
getElementById(“id-elemen”)
|
id-elemen disini digunakan untuk
menunjuk nilai dari atribut id dari elemen yang mau diakses obyeknya.
|
|
getElementsByTagName(“nama-tag”)
|
nama-tag disini digunakan untuk
mengambil obyek berdasarkan nama tag HTML-nya
|
|
getElementsByName(“nama”)
|
nama disini
adalah nilai dari atribut name dari elemen yang akan diakses. Umumnya diterapkan pada
komponen dari form, seperti input, select, checkbox, dan komponen lainnya.
|
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>
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.
