MANIPULASI OBYEK HTML (DOM Traversal)

MANIPULASI OBYEK HTML (DOM Traversal)

Mengakses obyek HTML melalui tag

1.  <div>info 1</div>

2.  <div>info 2</div>

3.  <script src="jquery-2.0.3.js"></script>

4.  <script>

5.  $(document).ready(function(){

6.    $('div').html('<u>info 2</u>');

7.  });

8.  </script>

Perintah pada baris 5 dan 7 pada skrip diatas digunakan sebagai perintah jquery untuk menangani event ready dari dokumen HTML. Event ready adalah event yang dikirimkan pada saat dokumen selesai di tampilkan oleh browser. Sedangkan perintah pada baris 6 digunakan untuk mengakses obyek HTML dengan tag div, $(‘div’), dan mengisinya dengan HTML <ul>info 2</u>.

Mengakses obyek HTML melalui atribut id

1.  <div>info 1</div>

2.  <div id="info2">info 2</div>

3.  <script src="jquery-2.0.3.js"></script>

4.  <script>

5.  $(document).ready(function(){

6.    $('#info2').html('<u>info 2</u>');

7.  });

8.  </script>

Program Javascript pada contoh diatas ini mirip dengan contoh sebelumnya, bedanya pada baris 6, obyek HTML pada contoh ini diakses melalui atribud id yang ditambahkan pada tag div. Penunjukkan atribut id oleh jQuery dilakukan dengan menambahkan tanda pagar (#) diawal id dari tag yang akan diakses. Penerapan atribut id tidak hanya dapat diberikan pada tag div namun juga untuk tag lainnya.