_________________________________________________________
- 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 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.
-------------------------------------------------------------------------------------------------------------------
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 :
1.getElementById: berfungsi mengambil objek
tunggal dengan pengenal berupa atribut id dari objek tersebut.
2.getElementByTaqeName:
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 :
|
No comments:
Post a Comment