Jumat, 10 Agustus 2018

Mengenal DOM HTML

DOM adalah sebuah aplikasi interface yang membantu merubah dan memodifikasi halaman website statis menjadi dinamis.

Dari w3school DOM adalah:

Document Object Model (DOM) adalah platform dan antarmuka yang memungkinkan program dan skrip untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis

Sebuah website berisi sebuah halaman HTML yang merupakan kerangka dasar pembentuk sebuah web. HTML ini terdiri dari elemen elemen yang akan diubah menjadi sebuah objek yang berisi properti. Dari properti ini kita bisa mengubah, manambah, memodifikasi sebuah value pada sebuah halaman website menjadi lebih dinamis menggunakan javascript.

Berikut ini adalah contoh sederhana mengenal DOM. Contoh ini pure kerangka HTML tanpa DOM. Dan setelah di buka di browser hanya menampilkan teks My First Page.

Berikut ini adalah kerangka HTML script dengan DOM

Kerangka HTML dengan dan tanpa DOM terlihat perbedaanya dari teks Hello world. Di Pure HTML tidak tampak adanya teks Hello world karena tidak adanya script untuk merubah element DOM dan tidak adanya elemen DOM yang dikenali untuk dirubah. Namun di HTML dengan DOM tampak <p id="demo"></p> adalah sebuah element yang dikenal (id) dan bisa di rubah dengan metode document.getElementById.

Berikut ini yang bisa dilakukan dengan DOM: