JavaScript/Manipulasi Dokumen Waktu Jalan

Manipulasi Dokumen Waktu Jalan
(Runtime Document Manipulation)

TODO	Nota penterjemah: Seperti biasa anda boleh mencuba kod yang dipaparkan dengan membuat fail HTML dan membukanya dengan pelayar

JavaScript dapat memanipulasi dokumen HTML yang telah dimuatkan ke dalam pelayar dengan menggunakan DOM (Model Objek Dokumen). Ini contohnya:

<html>
<head>
<script type="text/javascript">
      function tunjukPesanan() 
      {
          var divObj = document.getElementById("teksPesanan");
          if(divObj) {
             divObj.innerHTML="<b>Ini pesanan baharu daripada Javascript</b>";
          }
      }
</script>
</head>
   <body>
         <input type="button" value="Tunjuk Pesanan" onclick="tunjukPesanan();" />
         <div id="teksPesanan" style="width:400px; height:200px;color:#00FF00"></div> 
   </body>
</html>

Apabila dimuatkan ke dalam pelayar, dokumen HTML akan menunjukkan satu butang "Tunjuk Pesanan". Kita dapat melihat pesanan yang dipaprkan di bawah butang dengan memetik butang itu.

Jika kita lihat kod JavaScript di atas, kita dapat lihat bahawa fungsi JavaScript tunjukPesanan() dipanggil setiap kali kita memetik butang "Tunjuk Pesanan".

  
var divObj = document.getElementById("teksPesanan");

Objek document ialah objek DOM yang merujuk kepada HTML yang dimuatkan. Dengan mengguna metode getElementById() dan dengan mengunjukkan id/name unsur HTML berkaitan, kita dapat mengakses perwakilan DOM unsur tersebut (dalam kes ini, tag div). Kita tambah unsur HTMK yang baharu kepada dokumen HTML dengan menggunakan sifat innerHTML.

Sebelum: JavaScript/DHTML

Indeks

Berikut: JavaScript/Pengenalan Model Objek Dokumen (DOM)