Apa itu DOM?

Pengertian dari Document Object Model atau DOM adalah interface yang memungkinkan developer untuk mengubah konten, tampilan, dan struktur dari sebuah website.

Struktur dasar sebuah website tersusun oleh kode HTML dan CSS yang statis. Agar website bisa lebih dinamis, maka digunakanlah bahasa pemrograman Javascript. Javascript yang dinamis berbeda dari HTML dan CSS yang statis sehingga tidak bisa saling berkomunikasi.

Oleh karena itu, DOM dibuat sebagai penghubung antara Javascript dengan HTML dan CSS. Peran DOM adalah membuat Javascript bisa mengakses dan mengubah semua elemen statis yang ada di halaman website. 

Fungsi Penggunaan DOM

Fungsi dari penggunaan DOM sangat penting untuk merepresentasikan dokumen HTML yang sama namun dengan format yang berbeda menggunakan objek. 

Sebagaimana yang sudah dijelaskan sebelumnya, Javascript tidak dapat memahami dokumen HTML secara langsung. Contohnya, Javascript tidak bisa memahami format tag <h1>H1</h1> pada file HTML, namun ia bisa mengerti objek H1 di DOM. 

Properti di DOM

Setelah memahami apa itu DOM dan pentingnya penggunaan DOM dalam membuat website, selanjutnya Anda juga perlu mengetahui apa saja properti yang ada pada DOM.

Properti yang ada di DOM berfungsi untuk mengakses dan memodifikasi dokumen HTML. Adapun, properti di DOM adalah sebagai berikut:

• Window Object - objek pada browser yang berada di puncak hierarki. Objek ini secara otomatis dibuat oleh browser serta digunakan untuk mengakses semua properti yang ada di browser. 
• Document Object - dokumen HTML yang sudah dimuat ke dalam window. Objek ini memiliki beberapa properti yang terhubung dengan objek lainnya. Dengan objek ini, konten pada website dapat diakses serta dimodifikasi. Jika Anda ingin mengakses elemen yang ada pada HTML, maka properti yang harus Anda akses adalah document object.
• Link Object - properti DOM yang merepresentasikan link tags pada dokumen HTML.
• Anchor Object - properti DOM yang merepresentasikan a href tags pada dokumen HTML.
• Form Object - properti DOM yang merepresentasikan form tags pada dokumen HTML.
• Form Control Elements - properti DOM yang digunakan untuk mengatur elemen pada formulir seperti kolom teks, tombol, checkbox, dan lain sebagainya.

Cara Kerja DOM

Cara kerja DOM adalah dengan memanipulasi halaman website sehingga lebih dinamis dengan mengambil, mengubah, menambahkan, atau menghapus elemen HTML. Selain melakukan manipulasi, kemampuan lainnya dari DOM adalah mengumpulkan data, fungsi, dan atribut milik elemen yang diakses.

Berikut ini adalah beberapa contoh penggunaan DOM dalam mengakses dan memanipulasi dokumen HTML pada sebuah website:

Cara Mengambil Elemen HTML

Ada beberapa cara untuk mendapatkan elemen HTML dengan DOM:

• document.getElementByID(): DOM Javascript mengambil elemen berdasarkan ID.
• document.getElementByTagName(): DOM Javascript mengambil elemen berdasarkan nama tag. Artinya, DOM akan mengambil semua elemen yang memiliki tag tersebut.
• document.getElementByClassName(): DOM Javascript mengambil elemen berdasarkan class name. Artinya, DOM akan mengambil semua elemen yang berada di bawah class tersebut.

Cara Mengubah Elemen HTML

Anda bisa mengubah isi konten, struktur, dan tampilan elemen HTML dengan menggunakan DOM Javascript. Berikut adalah metodenya:

• element.innerHTML: Digunakan untuk mengubah isi konten pada elemen HTML.
• element.attribute: Digunakan untuk mengubah value dari sebuah atribut pada elemen HTML.
• element.style.property: Digunakan untuk mengubah style elemen HTML atau CSS

Cara Menambah atau Menghapus Elemen HTML

• document.createElement(element): Digunakan untuk membuat elemen HTML baru.
• document.removeChild(element): Digunakan untuk menghapus elemen HTML.
• document.appendChild(element): Digunakan untuk menambah elemen HTML.
• document.replaceChild(baru, lama): Digunakan untuk mengganti elemen HTML lama ke elemen HTML yang baru.
• document.write(text): menulis dan menggabungkan kode HTML dan Javascript secara langsung dalam satu baris kode. Ini merupakan salah satu kelebihan dari DOM Javascript.