Fleksibel dengan fungsi getElementById

Manipulasi variabel JavaScript dengan getElementById cenderung lebih fleksibel dan kompatible dibanding menggunakan pemanggilan elemen form semisal document.formName.inputName atau document.forms[0].elements[0].

getElementById adalah sebuah fungsi javaScript yang digunakan untuk mengakses property dan fungsi sebuah tag dengan hanya menunjuk ID-nya saja. Contohnya sebuah tag input teks ber-ID “hobby” akan dapat diakses nilainya melalui getElementById(‘hobby’).value selain juga dapat diakses dengan cara pemanggilan form document.myForm.hobby.value.

Ada beberapa kelebihan fungsi getElementById dibanding pemanggilan element form :

- pemanggilan element form relatif lebih kaku (akan lebih terasa saat anda bekerja dengan halaman web JavaScript dan validasi bervolume besar), sedangkan getElementById akan lebih easy-going, tak perduli jenis tag yang diakses (manggilnya berdasarkan ID tag, asalkan sebuah tag memiliki ID saja).

- getElementById bersifat seperti bunglon, jadi tergantung pada jenis tag yang diaksesnya. Misalkan tag yang diaksesnya adalah iframe atau img, maka property src akan berlaku. Demikian juga misalnya type tag yang diakses adalah input, maka property value atau disabled akan berlaku.

- Untuk pemakaian input-input yang sifatnya manipulatif (misalnya pada input yang bukan form murni dan tidak perlu dikirim), dengan getElementById kita tidak perlu repot-repot mendefinisikan form (lhah, buang-buang energi saja). Cukup mendefinisikan input yang diperlukan saja (tanpa perlu mendefinisikan form yang mewadahinya) dan yiihaa.. cukup mengaksesnya dengan fungsi ajaib ini.

- Dan ternyata wahai sodara-sodara, pada beberapa kasus halaman PHP yang di-generate pakai AJAX, pemanggilan element form tidak dikenali, sebaliknya penggunaan getELementById tetap valid.

Tentu saja anda jangan pernah lupa memberi ID pada setiap tag yang hendak dimanipulasi dengan fungsi getElementById. Atribut name pada input tetap diperlukan jika form tersebut hendak diproses oleh halaman PHP atau script sisi server lainnya.

Berikut ini contoh penggunaan atribut ID dan name pada tag.

Contoh tag

Diakses dengan getElementById

document.getElementById(‘first_name’).type akan menghasilkan ‘text’

document.getElementById(‘first_name’).value akan menghasilkan ‘Denmas’

document.getElementById(‘first_name’).focus() akan membawa fokus kursor kibord pada input ybs.

Diakses dengan PHP (setelah form disubmit dengan method POST)

$_POST[firstName] akan bernilai ‘Denmas’

Perhatikan bahwa ID dan NAME sengaja dibedakan untuk melihat efek perbedaannya (ID diakses oleh JavaScript, NAME diakses oleh PHP).

Contoh lain

Tag

Diakses dengan getElementById

document.getElementById(‘jam’).src akan menghasilkan ‘jam.php’ (juga dapat digunakan untuk mengeset nilai);

document.getElementById(‘jam’).style.borderWidth=’5px’; akan mengubah border iframe ybs menjadi selebar 5 piksel.

Atribut NAME tidak digunakan karena tag ini bukanlah sebuah input yang akan dikirim dan diproses oleh script sisi server.