Hirarki JavaScript

*****Hirarki JavaScript

Dalam sebuah halaman web terdapat bermacam-macam elemen seperti gambar (image), link, form, tombol, input text, dan sebagainya. JavaScript menyusun semua elemen halaman web dalam satu susunan hirarki. Setiap elemen dilihat sebagai object. Setiap object dapat memiliki beberapa property (yang menentukan sifat dan tampilannya) dan method (yang menentukan apa yang bisa dikerjakan oleh object yang bersangkutan). Dengan bantuan JavaScript kita dapat dengan mudah memanipulasi object-object tersebut. Untuk ini kita harus mengerti hirarki dari semua object-object HTML

 

Kita lihat ada dua image, satu link dan sebuah form dengan dua text field dan sebuah tombol. Dari pandangan JavaScript window browser adalah sebuah window-object. Window-object ini berisi elemen-elemen seperti statusbar. Di dalam window kita dapat me-load dokumen HTML (atau file bertipe lain - kita batasi dulu pada file HTML). Halaman ini merupakan sebuah document-object. Artinya document-object mewakili dokumen HTML yang di-load pada saat itu. Document-object merupakan object yang sangat penting dalam JavaScript – kita akan sering menggunakannya. Property dari document-object contohnya adalah warna background halaman

Berikut ini ilustrasi hirarki yang dibuat oleh contoh halaman HTML di atas:

 

Berikut ini ilustrasi hirarki yang dibuat oleh contoh halaman HTML di atas:

Untuk bisa memperoleh informasi tentang suatu object tertentu dan memanipulasinya kita harus tahu bagaimana mengaksesnya. Kita dapat mengetahui nama object-object yang ada berdasarkan pada hirarki di atas. Misalnya untuk mengakses image pertama kita harus melihat pada hirarki dimulai dari atas. Object pertama disebut document. Image pertama dalam halaman itu diwakili oleh images[0]. Ini artinya kita dapat mengakasesnya melalui JavaScript dengan nama document.images[0].

Demikian juga jika misalnya kita ingin mengetahui apa yang di masukkan user pada elemen pertama dari form, kita harus terlebih dahulu tahu bagaimana mengakses object yang dimaksud. Kita mulai lagi dari atas hirarki. Ikuti terus jalurnya sampai menemukan object bernama elements[0] – satukan semua nama object yang terlewati, sehingga kita menemukan nama text field pertama yaitu: document.forms[0].elements[0] .

Sekarang bagaimana kita bisa mengetahui isi dari text yang dimaksukkan user? Kita harus mengakses proprty atau method-nya. Untuk mengetahui secara lengkap property dan method apa yang dimiliki oleh object kita dapat melihat referensi JavaScript. Di situ kita akan melihat bahwa text field memiliki property value yang berisi text yang dimasukkan kedalamnya oleh user. Sekarang kita dapat membaca apa yang dimasukkan user misalnya dengan baris berikut ini:

name = document.forms[0].elements[0].value;

Posted in: Javascript