DOM adalah: Pengertian, Antarmuka, dan Objeknya
How to tekno
·waktu baca 3 menit
Tulisan dari How To Tekno tidak mewakili pandangan dari redaksi kumparan
PerbesarSaat 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
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:
Elemen HTML sebagai objek.
Properti dari semua elemen HTML.
Metode untuk mengakses semua elemen HTML.
Event untuk semua elemen HTML.
Antarmuka Pemrograman DOM
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:
Antarmuka pemrograman adalah properti dan metode dari setiap objek.
Properti adalah nilai yang bisa kamu dapatkan atau atur, seperti mengubah konten elemen HTML.
Metode adalah tindakan yang dapat kamu lakukan, seperti menambah atau menghapus elemen HTML.
Objek Dokumen DOM HTML
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
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
Properti
element.innerHTML: Konten html baru mengubah HTML bagian dalam dari suatu elemen.
element.attribute: Nilai baru mengubah nilai atribut dari elemen HTML.
element.style.property: Gaya baru mengubah gaya elemen HTML.
Metode
element.setAttribute(attribute, value): Mengubah nilai atribut dari elemen HTML.
3. Cara Menambah dan Menghapus Elemen
document.createElement(element): Buat elemen HTML.
document.removeChild(element): Menghapus elemen HTML.
document.appendChild(element): Tambahkan elemen HTML.
document.replaceChild(baru, lama): Ganti elemen HTML.
document.write(text): Tulis ke dalam aliran keluaran HTML.
Kesimpulannya, DOM adalah objek model standar dari XML dan HTML yang memiliki sifat platform secara mandiri. Kamu akan menemukan istilah di JavaScript.
(SAN)