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.