Ilmu Untuk Semua: HTML DOM - fungsi getElementById

Kehadiran Google Chrome dan juga beberapa perisian pelayar web yang baru menyebabkan pembangun perisian berada di dalam dilema untuk memilih pelayar mana yang akan menjadi keutamaan mereka. Kita juga sering melihat sesetengah pembangun perisian berasaskan web terpaksa meletakkan notis yang mengatakan Laman Web Ini Sesuai dilayari dengan menggunakan Pelayar Internet Explorer Sahaja.

Kehadiran DOM (Document Object Model) yang diperkenalkan oleh W3C(World Wide Web Consortium) telah menjadikan proses pembangunan aplikasi berasaskan web menjadi lebih mudah. Dokumen HTML telah dibahagikan kepada beberapa Element yang tersusun dalam struktur masing-masing.

contoh kandungan html:
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>My header</h1>
<a href="">My link</a>
</body>
</html>

Kandungan fail html ini ditafsirkan oleh fungsi DOM sehingga membentuk rajah berikut.

Dengan adanya fungsi ini, pembangun aplikasi berasaskan web menjadi lebih menarik dan setiap kandungannya akan menjadi lebih dinamik. Fungsi getElementById merupakan salah satu fungsi yang membolehkan kita memanggil mana-mana elemen yang disertakan dengan attributes id.

contoh: <a id="anchor_one" href="">My link</a>

Sekiranya pada dokumen html terdapat arahan anchor ini maka kebiasaan kita akan menggunakan arahan;

anchor_one.innerHTML = "Tukarkan Teks asal kepada Yang ini"
atau document.anchor_one.innerHTML = "Tukarkan Teks asal kepada Yang ini"
atau document.all["anchor_one"].innerHTML = "Tukarkan Teks asal kepada Yang ini"
Sayangnya arahan ini hanya akan berjaya dilaksanakan sekiranya pengguna menggunakan pelayan Internet Explorer. Bagi pelayan lain ia akan memaparkan ralat anchor_one tidak wujud. Untuk membolehkan ia dilaksanakan pada pelayan lain maka arahan tersebut perlu ditukarkan kepada;
document.getElementById("anchor_one").innerHTML = "Tukarkan Teks asal kepada Yang ini"
Barulah teks "My link" akan ditukarkan kepada "Tukarkan Teks asal kepada Yang ini" tanpa perlu pengguna hanya menggunakan IE sahaja.

Sebagai pembangun perisian berasaskan web, anda mestilah mula menggunakan fungsi ini. Tetapi sekiranya anda sekadar membangunkan perisian untuk digunakan oleh pengguna IE sahaja, tidak perlulah bersusah payah untuk menggunakan fungsi ini.

Rujukan:
# http://www.tizag.com/javascriptT/javascript-innerHTML.php
# http://www.w3schools.com/HTMLDOM/dom_intro.asp
# http://getelementbyid.com

Ilmu Untuk Semua

Pages

Friday, June 19, 2009

HTML DOM - fungsi getElementById

1 comment: