DOM

Apa itu DOM?

Document Object Model (DOM) merupakan konsep dasar dalam pengembangan web.

DOM adalah interface pemrograman untuk dokumen HTML dan XML. 

DOM memungkinkan web developer untuk berinteraksi dengan konten dan struktur halaman web sehingga aplikasi web yang dibuat dapat menjadi dinamis dan interaktif. 

Dengan DOM, developer dapat menambah atau menghapus elemen dari suatu halaman, mengubah teks atau style elemen, atau merespons interaksi pengguna secara real-time.

DOM dalam JavaScript

Document Object Model (DOM) dalam JavaScript adalah cara untuk berinteraksi dan memanipulasi konten dan struktur halaman web.

Dengan kata lain, JavaScript dapat mengakses dan memodifikasi objek dokumen dan elemennya dengan menggunakan DOM. 

Misalnya, seorang developer dapat menggunakan JavaScript untuk menambah atau menghapus elemen dari suatu halaman, mengubah teks atau style elemen, atau merespons interaksi pengguna (seperti klik tombol).

Caranya adalah saat suatu halaman web dimuat di browser, browser tersebut akan membuat objek dokumen yang menggambarkan struktur halaman tersebut. Objek dokumen ini kemudian disusun menggunakan struktur hierarkis seperti pohon yang terdiri dari elemen HTML (seperti <div>, <p>, dan <img>) dan konten terkaitnya, misal teks, gambar, dan lain-lain.

Berikut ini adalah contoh sederhana penggunaan DOM dalam JavaScript untuk mengubah konten sebuah dokumen HTML. Dokumen tersebut memiliki tombol yang bila diklik akan mengubah seluruh isi dokumen menjadi konten yang baru.

Fungsi DOM

Di bawah ini adalah fungsi DOM: 

• DOM membantu developer untuk memperbarui konten dan struktur halaman web sebagai respons terhadap interaksi pengguna atau event lainnya. Misalnya, JavaScript dapat digunakan untuk menambah, menghapus, atau memodifikasi elemen HTML pada sebuah halaman.
• DOM bermanfaat dalam pembuatan aplikasi web interaktif yang dapat merespons input pengguna dan memberikan feedback secara real time. Sebagai contoh, seorang developer dapat menggunakan JavaScript untuk membuat animasi, formulir interaktif, atau game yang diperbarui secara real time saat pengguna berinteraksi dengan halamannya.
• DOM merupakan cara standar JavaScript untuk berinteraksi dengan dokumen HTML dan XML dan memastikan kompatibilitas lintas browser. Hal ini berarti bahwa kode yang ditulis untuk satu browser secara umum akan berfungsi di browser lain juga.
• DOM sangat penting dalam meningkatkan kecepatan loading website. Dengan mengizinkan penambahan atau modifikasi elemen menggunakan JavaScript, tugas tertentu dapat dilakukan lebih cepat, dan waktu muat halaman dapat dikurangi.  Misalnya, menambahkan iframe secara dinamis dapat meningkatkan kecepatan loading halaman.

Properti di DOM

Melansir dari geeksforgeeks.org, properti DOM mengacu pada fitur objek dokumen yang dapat diakses dan diedit, dan properti tersebut mencakup: 

• Window Object: selalu berada di puncak hierarki dan bertindak seperti API karena menyediakan akses ke metode dan properti browser. 
• Document Object: mewakili dokumen HTML yang dimuat di window dan berisi berbagai properti yang merujuk ke objek lain, yang memungkinkan modifikasi dan akses ke konten suatu halaman. Dengan demikian, untuk mengakses elemen apa pun di halaman HTML dapat dimulai dengan mengakses document object.
• Form Object: diwakili oleh tag form. 
• Link Object: diwakili oleh tag link.
• Anchor Object: diwakili oleh tag a href.
• Form Control Elements: misalnya bidang teks, tombol, dan checkbox.

FAQ (Frequently Asked Question)

Apa saja jenis-jenis DOM? 

Berdasarkan w3schools.com, ada tiga jenis DOM, yaitu Core DOM, XML DOM, dan HTML DOM:

Core DOM

Core DOM adalah jenis yang paling umum yang digunakan untuk merepresentasikan dokumen HTML atau XML sebagai struktur objek seperti pohon. Core DOM menyediakan interface untuk  web developer supaya dapat mengakses dan memodifikasi konten dan struktur halaman web.

XML DOM 

XML DOM digunakan untuk mewakili dokumen XML sebagai pohon objek. XML DOM mirip dengan Core DOM, tetapi memiliki kumpulan properti dan metode yang berbeda.

HTML DOM 

HTML DOM juga merupakan jenis DOM yang paling umum digunakan untuk web development. HTML DOM adalah versi khusus dari Core DOM yang digunakan untuk merepresentasikan dokumen HTML sebagai pohon objek. HTML DOM mencakup properti dan metode tambahan yang spesifik untuk HTML, seperti mengakses dan memanipulasi elemen formulir dan menggunakan CSS.