DOM: Pengertian, Fungsi, Manfaat dan Cara Kerjanya

DOM adalah antarmuka yang berfungsi untuk ubah tampilan pada halaman situs tanpa harus memuat ulang. Bagi Anda yang sedang belajar JavaScript, pasti tahu bahwa Javascript dapat membuat halaman website jadi dinamis dan menarik. Hal ini bisa dilakukan menggunakan DOM. 

Dom ini bisa memanipulasi halaman web dan bisa digabungkan juga. Di bawah ini merupakan penjelasan mengenai pengertian DOM, fungsi dan cara kerjanya agar Anda lebih paham. 

Apa Itu DOM?

DOM adalah singkatan dari Document Object Model yang merupakan interface program yang memungkinkan developer melakukan pengubahan pada tampilan, konten hingga struktur website tersebut. DOM dapat bekerja dengan memanipulasi JavaScript sehingga bisa melakukan hal ini. 

Struktur pada suatu website disusun oleh HTML dan juga CSS secara statis. Supaya website jadi dinamis bisa menggunakan bahasa pemrograman JavaScript. DOM bisa dibuat untuk penghubung JavaScript dengan HTML atau CSS. DOM berperan untuk membuat JavaScript dapat mengakses dan mengubah seluruh elemen statis yang terdapat di suatu halaman website. 

Fungsi DOM

Fungsi utama dari DOM itu sendiri untuk memanipulasi elemen di halaman website dengan cara memanfaatkan JavaScript. Selain itu, DOM juga memiliki fungsi lainnya, seperti:

1. Melakukan Aksi pada Elemen 

Salah satu contoh fungsi dari DOM selain memodifikasi adalah melakukan aksi pada elemen. Contohnya adalah menggulir halaman website, menekan tombol elemen dan yang lainnya. 

2. Menambahkan dan Menghapus Elemen 

Fungsi kedua DOM adalah untuk menambahkan dan menghapus elemen. Tampilan di browser terdiri dari elemen yang berbeda-beda. Contohnya adalah elemen img di sebuah elemen body. Elemen img, HTML memiliki anak head dan juga body. 

Setelah itu pada elemen body memiliki elemen img sehingga dengan DOM Anda bisa menghapus pada elemen tertentu yang tidak digunakan. Anda juga bisa menambahkan elemen yang baru di seperangkat DOM tersebut. 

3. Mengubah Atribut Elemen 

Fungsi kedua DOM yaitu dapat mengubah atribut elemennya sehingga tidak hanya bisa menambahkan atau mengurangi saja. Contohnya adalah mengubah atribut src di elemen img maupun mengubah href di elemen a. 

4. Memberikan Respon

Fungsi keempat DOM adalah untuk memberikan respon pada aksi pada elemen. Kegunaan melakukan aksi di elemen ini bisa diikuti juga dengan kegunaan yang lainnya seperti memberi respon pada aksi yang terjadi di elemen. Contohnya menentukan fungsi respon apabila sebuah elemen diberi aksi tombol diklik. 

Begitulah beberapa fungsi atau manfaat DOM yang harus diketahui supaya bisa menggunakannya dengan baik. 

Cara Kerja DOM

Cara kerjanya adalah memanipulasi sebuah halaman website supaya lebih dinamis dengan cara mengambil, menambahkan, mengubah atau menghapus elemen HTML. Selain bisa memanipulasi, DOM juga bisa mengumpulkan data, atribut elemen dan fungsinya. 

Nah, di bawah ini merupakan sejumlah contoh penggunaan DOM saat mengakses dan juga memanipulasi dokumen HTML di suatu website:

Cara Mengambil Elemen HTML 

Anda telah memahami bahwa DOM merupakan bagian yang juga bisa membuat style di situs website. Nah, cara mengambil cara elemen HTML bisa dilakukan dengan beberapa cara, yaitu:

1. Menggunakan Nama Kelas 

Mengambil elemen HTML bisa menggunakan metode getElementsByClassName() kemudian menyimpan hasilnya pada suatu variabel. 

2. Menggunakan Nama ID

Cara mengambil elemen HTML menggunakan nama ID menggunakan metode getElementsByID() dan kemudian simpan di suatu variabel. var titl Dengan perintah tersebut, JavaScript DOM mengambil elemen menggunakan ID yang ada di dalam kolom dan menyimpannya di variabel yang sesuai dengan namanya tersebut. 

3. Menggunakan Nama Tag 

Cara mengambil elemen HTML menggunakan nama tag memakai metode getELementsByTagName(). 

4. Menggunakan QuerySelector 

Cara mengambil elemen HTML menggunakan QuerySelector ini memungkinkan Anda untuk dapat mengembalikan pada elemen yang pertama. Pengembalian ini sesuai dengan SS Selector yang sudah Anda tentukan sebelumnya. Anda bisa mendapatkan elemen memakai ID kelas, tag atau semua CSS Selector yang valid. 

5. Mendapatkan Elemen Secara Spesifik 

Anda bisa mendapatkan elemen secara spesifik dengan memanfaatkan CSS Selector. Anda dapat mencari tag atau kelas dengan waktu yang bersamaan juga. 

6. Menggunakan QueryselectorAll

Apabila Anda sudah memahami metode QuerySelector(), sekarang tinggal memahami metode QueryselectorAll(). Caranya sebenarnya tidak berbeda jauh dengan sebelumnya, namun ada perbedaan dari keduanya. Perbedaannya saat Anda mengembalikan semua elemen yang sama dengan menggunakan CSS Selector. 

Cara Mengubah Elemen HTML 

Penjelasan selanjutnya mengenai DOM adalah cara mengubah elemen HTML, yaitu:

1. Menggunakan innerHTML digabung dengan ID

Metode yang pertama menggunakan innerHTML yang digabungkan dengan ID Header dan mengatur konten innernya sesuai dengan keinginan. 

2. Menggunakan innerHTML digabung dengan metode getElemensByTagName

Metode yang kedua menggunakan innerHTML yang digabungkan dengan metode getElemensByTagName sesuai dengan keinginan Anda. 

Cara Menambahkan atau Menghapus Elemen HTML 

Cara menambahkan elemen HTML bisa dilakukan menggunakan metode createElement(). Selain Anda bisa menambahkan elemen, namun juga bisa menghapusnya. Metode yang Anda pakai adalah removeChild(). 

Menulis Langsung ke HTML Output System 

Selain Anda bisa memakai cara sebelumnya yang sudah dijelaskan, namun juga bisa menulis ekspresi HTML atau JavaScript langsung. Anda bisa menulis ke HTML Output System dan metode ini bisa memakai write(). Anda juga bisa meneruskan ekspresi dari JavaScript dengan mudah, contohnya ingin memakai objek tunggal atau yang lainnya. 

Properti yang Dimiliki DOM

Setelah Anda memahami pengertian DOM, fungsi dan cara kerjanya sekarang Anda perlu memahami properti yang terdapat di DOM yang memiliki fungsi untuk mengakses atau memodifikasi dokumen HTML, seperti:

Document Object

Dokumen HTML telah dimuat di dalam Window dan objek yang satu ini mempunyai sejumlah properti terhubung dengan objek yang lainnya. Dengan adanya objek ini, konten yang ada di website bisa diakses dan juga dimodifikasi. 

Apabila Anda ingin mengakses elemen yang sudah ada di HTML, maka properti yang seharusnya diakses adalah object. 

Window Object 

Window object merupakan objek di browser yang ada pada puncak hierarki. Objek ini juga otomatis dibuat oleh browser serta dipakai untuk seluruh properti di browser. 

Anchor Object 

Anchor objek merupakan properti di DOM yang dapat mempresentasikan a href tags di dokumen HTML. 

Link Object 

Link objek merupakan properti di DOM yang dapat mempresentasikan link tags di dokumen HTML. 

Form Object 

Form objek merupakan properti di DOM yang dapat mempresentasikan form tags di dokumen HTML. 

Form Control Elements 

Form Control Elements merupakan properti di DOM yang dapat dipakai untuk mengatur elemen di formulir, seperti tombol, kolom teks, checkbox dan yang lainnya. 

Browser bisa menampilkan halaman website dengan bentuk DOM. Dengan adanya DOM, Anda dapat memanipulasi setiap elemen HTML memakai bahasa pemrograman seperti contohnya Javascript. Dari penjelasan di atas, DOM adalah antarmuka bahasa pemrograman dengan objek yang dapat mempresentasikan dokumen suatu website. 

Dalam dunia pengembangan web, DOM (Document Object Model) merupakan inti dari interaktivitas dan dinamika halaman web. Apakah Anda ingin memahami betul tentang DOM, bagaimana ia bekerja, dan bagaimana menggunakannya untuk menciptakan pengalaman web yang menakjubkan? Mari kita pelajari kursus tentang DOM secara lengkap ini di Coding Studio!