Mudahnya Mengakses dan memanipulasi DOM HTML.

Sesuai janji saya yang kemaren, pada kesempatan ini saya akan menjelaskan bagaimana mengakses dan memanipulasi DOM HTML dengan mengunakan Prototype Framework Javacript.

Mehtod $

$(String | Element) ---> HTMLElement
$(String | Element ,.... )---> [HTMLElement.....]

Untuk menjelaskan method diatas, saya akan memberikan dua buah kasus yang kan menggunakan method tersebut.

Kasus 1

<div id="kasus">
   <div id="title" >Kasus Title</div>
   <img id="gambar_kasus" src="img.jpg" border=0 />
</div>

Seperti kode HTML diatas, jika ingin mengambil Elemen div dengan id “kasus1″ dan mengubah atribut stylenya  dengan Javascript

var  elmDiv = document.getElementById("kasus");
elmDiv.style.potition = "absolute";
elmDiv.style.top = 40;
elmDiv.style.left = 60;

Jika mengunakan Framework Prototype cukup dengan

$('kasus').setStyle("position : absolute;top:40px;left:60px;");

Dalam kasus ini, saya bisa memotong 4 baris program menjadi satu baris dengan mengunakan Prototype.

Kasus 2

<div id="kelompokKasus">
   <div id="kasus1">
      <div id="title2" >Kasus1 Title</div>
      <img id="gambar_kasus" src="img.jpg" border=0 />
   </div>
   <div id="kasus2">
      <div id="title2" >Kasus2 Title</div>
      <img id="gambar_kasus" src="img.jpg" border=0 />
   </div>
   <!-- sampai kasus n (1.2.3.4.....n) -->
</div>

Jika ingin mengubah atribut style dari element yang dipilih:

$("kasus1","kasus2","kasus3","kasus4",.... n).each(function(elm){
   elm.setStyle("font-family: verdana; font-weight : bold; color:red;");
});

cukup simple bukan?

Jika ada yang bertanya silahkan, nanti sebisa saya untuk menjawabnya.

Introducing Prototype.

Prototipe adalah JavaScript Framework yang bertujuan untuk memudahkan pengembangan aplikasi web dinamis. Dengan mudahnya saya bisa memanipulasi halaman web yang dapat memberikan kesan yang lebih user frendly.

Yang unik dari Prototype adalah codebase yang lebih mudah di mengerti dan simple yang memberikan kecepatan dalam melakukan pemograman.

Berikut method-method yang akan sering di ginakan jika memakai Prototype :

$(id | element) -> HTMLElement
$((id | element)...) -> [HTMLElement...] /*Array*/
$$(cssRule...) -> [HTMLElement...]
$A(iterable) -> actualArray
$F(element) -> value
$H([obj]) -> Hash
$R(start, end[, exclusive = false]) -> ObjectRange
$w(String) -> Array
Try.these(Function...) -> firstOKResult

Kalau mau lebih jelasnya silahkan kunjungai Official Website-nya.

http://www.prototypejs.org/api/utility/

Jika saya punya waktu, nanti saya jelasin satu persatu dengan contohnya sekalian. Bayak sekali yang dapat kita pelajari dari method-method diatas yang akan memudahkan kita dalam memanipulasi DOM.

Sampai jumpa di lain kesempatan.