Pada artikel sebelumnya kita telah belajar mengenai definisi DOM dan menggunakan javascript untuk memilih/menselect elemen pada HTML. Setelah kita bisa memilih elemen HTML, kita bisa memodifikasi atau memanipulasi elemen tersebut.

Mengubah Elemen

Mengubah isi/konten elemen

pada artikel sebelumnya kita telah menggunakan properti innerHTML. innerHTML bisa digunakan untuk mendapatkan atau mengubah isi/konten dari suatu elemen HTML.

Contoh:

<div id="footer"></div>

<script>
 var myfooter=document.getElementById("footer");
 myfooter.innerHTML="copyright 2016";
</script>

Mengubah attribut elemen

Dengan cara yang sama kita juga bisa mengubah attribut dari elemen HTML. sebagai contoh kita dapat mengubah attribut class dari suatu elemen;

<div id="alert" class="hide">....</div>

<script>
 document.getElementById("alert").class="show";
 //sekarang class dari elemen berubah menjadi "show"
</script>

anda juga dapat mengaplikasikan hal tersebut kepada attribut lainnya seperti src,href,value,dan lain-lain.

Mengubah style elemen

kita juga dapat mengubah style dari elemen HTML menggunakan Javascript. Contoh:

<div id="welcome" style="width:100px">Welcome Guest!</div>

<script>
 var w=document.getElementById("welcome");
 w.style.width="200px";
 w.style.color="white";
</script>

Menambah Elemen

Menuju ke bagian dua