[Contoh]Berkreasi Sederhana dengan DOM dan Button

Bagaimanakan cara membuat script seperti itu dengan javascript?

  1. Membuat sebuah DIV yang akan siap termanipulasi.
  2. Menangkap DIV sebagai DOM dengan getElementById
  3. Melakukan pengubahan value dengan innerHTML
  4. Membuat fungsi untuk dua kondisi. Diatas digunakan kondisi UBAH dan BALIK
  5. Membuat ELEMEN yang onclick adalah memanggil fungsi tadi
Ini adalah div coba

Javascript DOM dalam HTML

Untuk memanipulasi browser dalam menampilkan data, tentu sangat lebih baik digunakan bahasa CLIENT SIDE, yang datanya telah didapat dari server side (database, bahasa pemrograman server dll). Dengan bahasa Client Side, akan sangat membantu kinerja server, dan selanjutnya melimpahkan beberapa beban ke client. Disamping itu proses animasi yang jalan di tingkat client akan sangat maksimal.

Seperti kita ketahui , sebuah halaman HTML akan terdiri dari banyak elemen, seperti div, img, span, p, h dan lain sebagainya. Elemen tersebut bisa juga memiliki atribut berupa style, id, class, name dan lain sebagainya. Untuk keperluan pengubahan-pengubahan elemen di HTML di tingkat client, dapat digunakan manipulasi dengan DOM. Document Object Model. Apa itu? Yaitu cara javascript mengambil value element sebagai model, yang akan diberi tindakan selanjutnya.
DOM itu ternyata mudah, hanya perlu mengenal kata : getElementById().

misal akan kita buat variabel x adalah berisi obyek model dari div “coba”. Maka kode HTML akan menjadi seperti berikut

Ini adalah div coba

Misal akan kita lakukan pengubahan isi div coba, maka akan seperti berikut:

Ini adalah div coba

Selamat mencoba :). Silakan CLICK