DOM atau kependekan dari Document Object Model merupakan salah satu bahasa pemrograman. DOM merupakan objek model standar bagi XML dan HTML yang memiliki sifat platform independent. Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat.
Nah, saat proses render file HTML berlangsung, browser akan membuat DOM atau model objek dokumen yang merupakan model berorientsi objek dari struktur logic-nya. Dalam bahasa program paling dasar terdapat situs web yang terdiri dari HTML dan CSS. Dari dua elemen tersebutu, kemudian browser akan membuat representasi dokumen yang biasa disebut dengan DOM.
Baca juga: Mengenal Kriteria Website User Friendly
Pengertian DOM di JavaScript
DOM di Javascript (Sumber: freepik.com)
JavaScript adalah bahasa pemrograman yang banyak digunakan dalam pengembangan website, aplikasi, dan game. Apabila kita dapat menguasai bahasa pemrograman maka akan dengan mudah untuk membuat tampilan website yang menarik untuk mengembangkan game online. Misalnya, dalam bahasa pemrograman popular digunakan untuk membuat situs dengan konten website yang cenderung dinamis.
Konten dinamis merupakan konten yang dapat bergerak atau berubah di depan layar tanpa perlu memuat ulang halaman. Contohnya, fitur slideshow foto, gambar animasi, pengisian polling, dan lain sebagainya. Seiring perkembangan zaman, JavaScript tidak hanya digunakan pada sisi client, akan tetapi juga pada sisi server. Eksekusi bahasa dalam pemrograman berada pada sisi server yang dapat dilakukan dengan memanfaatkan platform framework JavaScript, seperti Node JS, React JS, dan lain sebagainya.
Perkembangan teknologi mobile pada saat ini mengarah kepada Progressive Web Applications atau biasa disebut dengan PWA. Teknologi ini berbasis pada teknologi web, yaitu HTML, CSS dan JavaScript. Salah satu dari DOM adalah objek model standar dari XML dan HTML yang memiliki sifat platform secara mandiri.
Biasanya, saat mulai membuka sebuah halaman web pada browser, akan muncul file HTML dari web yang dimuat dan ditampilkan pada layar perangkat. Pada saat proses render file HTML, browser akan membuat DOM atau model objek dokumen yang menjadi model berorientasi objek dari struktur logisnya. Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi dan atribut berupa objek berdasarkan elemen HTML.
Objek yang berasal dari dokumen HTML tersebut akan digunakan ketika membuat program JavaScript. Proses yang telah dilakukan tersebut disebut dengan API (Application Programming Interface). Selanjutnya, dokumen HTML tersebut memungkinkan JavaScript untuk mengakses dan memanipulasi elemen dan juga style yang ada pada situs web tersebut.
Objek yang ada dalam dokumen HTML tersebut memiliki struktur masing-masing. Di antaranya, elemen HTML sebagai objek property dari semua elemen HTML, metode yang digunakan untuk mengakses semua elemen yang ada pada HTML, serta event untuk semua elemen HTML. Ketika sebuah halaman web di-load oleh browser maka akan membentuk DOM. Perkembangan selanjutnya adalah HTML DOM yang merupakan start object dan programming interface untuk HTML yang dapat diakses melalui JavaScript.
Jadi, dengan menggunakan DOM HTML maka seseorang dapat melakukan get, add, change, add atau delete suatu atau beberapa elemen HTML. Dengan DOM HTML ini kita akan melihat serupa tree atau phon dari elemen-elemen HTML. Menggunakan bahasa JavaScript kita dapat membaca, menulis atau memanipulasi DOM.
Kita juga dapat melihat tampilan yang berbasis object atau dalam bahasa Inggris disebut Object Oriented Representation. Namun sebelum itu, kita juga harus benar-benar memahami dengan baik mengenai HTML DOM karena akan lebih banyak berinteraksi dengan HTML DOM pada saat kita melakukan pemrograman dengan menggunakan JavaScript.
Saat ini, pemrograman dengan menggunakan JavaScript sedang berkembang, terutama pada aplikasi mobile PWA. Maka dapat disimpulkan bahwa programmer pada saat ini mau tidak mau harus menguasai HTML DOM dengan baik.
Fungsi DOM di JavaScript
DOM di JavaScript (Sumber: freepik.com)
DOM dapat berfungsi untuk memanipulasi tampilan web yang menggunakan JavaScript. Pada saat proses render berlangsung, browser akan membuat model objek dokumen atau DOM. Objek yang berasal dari dokumen HTML akan menyediakan kumpulan data, fungsi, serta atribut yang bertujuan agar dapat bermanfaat pada saat proses membuat program JavaScript. Hal inilah yang biasanya disebut dengan API (Application Programming Interface).
Baca juga: 10 Website Jurnal Gratis 2022
Cara Menggunakan DOM
DOM di Javascript (Sumber: freepik.com)
Objek dokumen mewakili halaman situs web. Apabila akan mengakses elemen apa saja yang ada pada halman HTML maka harus selalu dimulai dengan mengakses objek dokumen. Berikut merupakan beberapa contoh bagaimana dapat menggunakan objek dokumen untuk mengakses dan memanipulasi HTML.
1. Cara mendapatkan elemen HTML
- document.getElementById(id): Temukan elemen demi elemen id.
- document.getElementsByTagName(name): Temukan elemen berdasarkan nama tag.
- document.getElementsByClassName(name): Temukan elemen berdasarkan nama kelas.
2. Cara mengubah elemen HTML
- innerHTML: Konten HTML baru mengubah HTML bagian dalam dari suatu elemen.
- attribute: Nilai baru mengubah nilai atribut dari elemen HTML.
- style.property: Gaya baru mengubah gaya elemen HTML
- setAttribute(attribute, value): Mengubah nilai atribut dari elemen HTML.
3. Cara memperoleh dan menghapus elemen
- createElement(element): Buat elemen HTML.
- removeChild(element): Menghapus elemen HTML.
- appendChild(element): Tambahkan elemen HTML.
- replaceChild(baru, lama): Ganti elemen HTML.
- w.rite(text): Tulis ke dalam aliran keluaran HTML.
Baca juga: Yuk, Belajar Mengenal Traffic Pada Website
Demikian penjelasan tentang pengertian dan cara menggunakannya DOM di JavaScript. Kamu dapat menggunakan DOM di JavaScript dengan beragam, seperti melakukan get, add, change, add atau delete suatu atau beberapa elemen HTML. Dengan DOM HTML ini kita akan melihat berupa tree atau phon dari elemen-elemen HTML, dan lainnya sesuia kebutuhanmu. Selamat mencoba!
Leave a Reply