DOM adalah: Pengertian, Antarmuka, dan Objeknya

Ilustrasi coding HTML. Foto: Markus Winkler/unsplash

Saat kamu memutuskan untuk belajar JavaScript, DOM adalah salah satu istilah yang wajib kamu pahami.

Sebenarnya, istilah DOM tidak hanya ada pada pemrograman JavaScript saja. Kamu juga bisa menemukannya pada bahasa pemrograman yang lain.

Pada bahasa program paling dasar, situs web terdiri dari HTML dan CSS. Nantinya, browser akan membuat representasi dokumen yang biasa disebut dengan DOM.

Lantas, apa itu DOM? Rasa penasaranmu akan terjawab dalam artikel berikut ini. Jadi, JavaScript DOM adalah sebagai berikut.

DOM adalah

Ilustrasi DOM. Foto: James Harrison/Unsplash

DOM atau Document Object Model merupakan 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.

Nah, saat proses render file HTML berlangsung, browser akan membuat DOM atau model objek dokumen yang menjadi model berorientsi objek dari struktur logisnya. Objek dokumen adalah model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML.

Nantinya, objek dari dokumen tersebut akan dimanfaatkan ketika membuat program Javascript. Proses tersebut yang dimaksud dengan API (Application Programming Interface).

Kemudian, dokumen tersebut memungkinkan JavaScript untuk mengakses dan memanipulasi elemen serta style pada situs web. Model ini diatur dalam struktur objek seperti berikut:

Antarmuka Pemrograman DOM

Ilustrasi DOM. Foto: Firos nv/unsplash

Sesuai dengan empat model di atas, bahwa DOM HTML merupakan standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML. DOM HTML dapat diakses dengan JavaScript dan dengan bahasa coding lainnya.

Dalam suatu DOM, semua elemen HTML didefinisikan sebagai objek. Kamu akan belajar istilah-istilah berikut saat mulai pemrograman DOM pada HTML:

Objek Dokumen DOM HTML

Ilustrasi DOM. Foto: Pankaj Patel/Unsplash

Objek dokumen mewakili halaman situs web. Jika ingin mengakses elemen apa pun di halaman HTML, maka selalu mulai dengan mengakses objek dokumen. Di bawah ini adalah beberapa contoh bagaimana kamu dapat menggunakan objek dokumen untuk mengakses dan memanipulasi HTML.

1. Cara Mendapatkan Elemen HTML

2. Cara Mengubah Elemen HTML

Properti

Metode

3. Cara Menambah dan Menghapus Elemen

Kesimpulannya, DOM adalah objek model standar dari XML dan HTML yang memiliki sifat platform secara mandiri. Kamu akan menemukan istilah di JavaScript.

(SAN)