Hallo sobat, berjumpa lagi dengan catatan lanjutan tentang javascript. Kali ini catatan Donga akan bercerita tentang DOM (Document Object Model). Catatan ini menjadi salah satu pilihan Donga, karena dirasa sangat berguna dalam membuat sebuah aplikasi web.
Pengertian
HTML DOM adalah aturan dasar bagaimana cara mendapatkan, mengubah, menambah, atau menghapus elemen HTML. DOM diperlukan oleh javascript untuk menampilkan object dinamis pada layar browser, atau dengan kata lain, HTML DOM adalah cara javascript melihat suatu halaman HTML agar program javascript dapat menampilkan halaman dinamis.
Dari pengertian di atas mungkin kita bisa membayangkan bahwa tujuan dari html DOM adalah menciptakan sebuah object yang dinamis, karena ia berfungsi untuk mendapatkan, mengubah, menambah, atau menghapus element html. Sedangkan kita tahu bahwa element html ini adalah pembentuk sebuah object.
untuk lebih memahami pengertian di atas mari kita lihat satu persatu apa yang bisa dilakukan oleh html DOM :
Mendapatkan Sesuatu dari Element HTML
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";</script>
</body>
</html>
sumber: https://www.w3schools.com/js/js_htmldom_methods.asp
untuk melihat bagaimana html DOM mendapatkan sebuah object, Sobat bisa meng-copy kode di atas kemudian pastekan ke HTML Editor sobat, notepad atau notepad++. Selanjutnya simpan dengan nama get.html. Setelah itu silahkan jalankan di browser, Mozilla Firefox atau Chrome.
Perhatikan apa yang terjadi. Jika Sobat melakukan langkah yang benar, maka akan terlihat tampilan seperti ini :
HTML DOM adalah aturan dasar bagaimana cara mendapatkan, mengubah, menambah, atau menghapus elemen HTML. DOM diperlukan oleh javascript untuk menampilkan object dinamis pada layar browser, atau dengan kata lain, HTML DOM adalah cara javascript melihat suatu halaman HTML agar program javascript dapat menampilkan halaman dinamis.
Dari pengertian di atas mungkin kita bisa membayangkan bahwa tujuan dari html DOM adalah menciptakan sebuah object yang dinamis, karena ia berfungsi untuk mendapatkan, mengubah, menambah, atau menghapus element html. Sedangkan kita tahu bahwa element html ini adalah pembentuk sebuah object.
untuk lebih memahami pengertian di atas mari kita lihat satu persatu apa yang bisa dilakukan oleh html DOM :
Mendapatkan Sesuatu dari Element HTML
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";</script>
</body>
</html>
sumber: https://www.w3schools.com/js/js_htmldom_methods.asp
untuk melihat bagaimana html DOM mendapatkan sebuah object, Sobat bisa meng-copy kode di atas kemudian pastekan ke HTML Editor sobat, notepad atau notepad++. Selanjutnya simpan dengan nama get.html. Setelah itu silahkan jalankan di browser, Mozilla Firefox atau Chrome.
Perhatikan apa yang terjadi. Jika Sobat melakukan langkah yang benar, maka akan terlihat tampilan seperti ini :
Pada browser timbul tulisan "Hello World!. Dari contoh di tersebut kita mendapatkan dua point pelajaran dari html DOM
Pertama bagaimana sebuah fungsi dari javascript menemukan element paragraf dengan id = "demo"
Kedua bagaimana sebuah fungsi dari javascript mengubah content/isi dari element paragraf yang ditemukannya, yang tadinya kosong kemudian diubah dengan kalimat "Hello World!" sebagai content/isi dari element paragraf yang baru.
Masih bingung dengan penjelasan ini? Sekarang coba Sobat buka kembali file get.html tadi, coba lakukan sedikit modifikasi kode di dalamnya, seperti terlihat pada script di bawah ini :
<html>
<body>
<p>Silahkan Klik Kalimat dibawah ini :</p>
<p id="demo" onclick="klikdonga()">Belajar html DOM</p>
<script>
function klikdonga() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>
Setelah di save, selanjutnya jalankan pada browser, nantinya akan terlihat seperti ini :
Tampilan Sebelum di Klik
Tampilan Setelah di Klik
Disini dapat kita lihat, bahwa html DOM bisa menggantikan kalimat "Belajar html DOM" dengan kalimat baru "Hello World"
Baik, untuk lebih mudah mengingat kita mulai dari pengertian Document. Document adalah seluruh rangkaian kode mulai dari root html (<html>) sampai ke leaf html (<h1>, <a>,<title>). Atau kalau memakai istilah Donga, Document HTML adalah bundel dari kode html. Coba Sobat perhatikan bagan di bawah ini :
Pohon Object Dari HTML DOM
sumber:https://www.w3schools.com/js/js_htmldom.asp
Pada bagan di atas terlihat bahwa Document terletak pada bagian paling atas, hal ini tentunnya menunjukkan bahwa Document mengandung seluruh element HTML dari itulah maka Donga lebih suka menyebut Document ini sebagai Bundel dari kode html. Ibarat sebuah bundel maka didalamnya terletak berbagai macam berkas yang berbeda isinya.
Selanjutnya kita lihat kata Object. Object disini tentunya adalah Object html, object disini adalah tampilan yang ditampilkan oleh Browser. Apakah itu text, paragraf, gambar, video, atau yang lainnya.
Lanjut ke Model adalah Style atau gaya dari object tadi. Maksud model disini tidak hanya sebatas model tampilan static saja, seperti warna text merah atau kuning, atau text huruf kapital semua, atau huruf kecil semua. Tetapi pengertian dari Model disini lebih luas, bisa mencakup cara penyajian yang bersifat dinamis dari sebuah object. Misalkan obaject yang tadinya tidak ada di halaman browser menjadi ada.Seperti timbulnya sebuah peringatan saat kita menekan tombol yang salah pada halaman browser. Contoh lain misalnya teks yang berjalan dari kiri kekanan, text yang berkedip, dan masih banyak lagi.
Jadi kesimpulannya menurut Donga, Document Object Model (DOM) HTML adalah sebuah document (bundel dari kode HTML) yang akan ditampilkan pada halaman browser dengan style atau gaya atau model, sesuai dengan isi dari document tersebut.
Sedangkan untuk pengertian resmi dari W3C (World Wide Web Consortium) pengertian DOM adalah
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Begitulah sepintas kilas pengertian Document Object Model (DOM) HTML, versi "Klik Donga" jika ada yang memiliki cara pandang yang berbeda boleh saja, karena ilmu di internet bebas interpretasi apalagi berkenaan dengan pengertian, Biarlah cara pandang berbeda, asalkan tampilan di browsernya nanti sama. :)
Tidak ada komentar:
Tulis komentar