Mengenal Pengertian DOM Adalah: Fungsi & Cara Kerjanya!
Dom Adalah - DOM (Document Object Model) adalah konsep fundamental dalam pengembangan web. DOM Adalah struktur data berbentuk pohon (tree) yang memetakan setiap elemen HTML sebagai objek-objek dalam dokumen. Menurut Wikipedia, DOM bersifat lintas platform dan independen bahasa pemrograman, sehingga skrip atau program dari berbagai bahasa dapat mengakses dan memanipulasi elemen halaman. Dengan DOM, elemen HTML seperti paragraf, gambar, atau tombol diubah menjadi objek JavaScript yang dapat diakses dan dimodifikasi. Ini berarti DOM Adalah jembatan antara kode JavaScript dan tampilan halaman web: ia menyediakan model dokumen yang memungkinkan program mengubah struktur, konten, dan gaya halaman tanpa perlu me-refresh seluruh halaman.
Secara garis besar, ketika browser memuat suatu halaman web, ia akan membaca kode HTML dan membangun DOM Tree di memori. Setiap tag HTML diubah menjadi node dalam struktur pohon ini. Setelah DOM terbentuk, JavaScript dapat langsung berinteraksi dengan node-node tersebut. Misalnya, perintah document.getElementById("header") akan menghasilkan objek yang mewakili elemen dengan id="header". Kemudian properti seperti innerText, innerHTML, atau metode seperti appendChild dapat digunakan untuk mengubah teks, atribut, atau menambah elemen baru secara dinamis. Karena DOM bekerja secara real-time, setiap perubahan yang dilakukan oleh JavaScript langsung terlihat di halaman tanpa perlu reload. Inilah yang membuat web modern menjadi interaktif dan responsif.
Fungsi Utama DOM dalam Pengembangan Web
DOM memainkan peran sangat penting dalam pengembangan web modern. Beberapa fungsi utama DOM antara lain:
- Representasi Struktural: DOM menciptakan model pohon objek dari seluruh elemen halaman web. Setiap tag HTML menjadi node dalam pohon ini, memudahkan pengembang untuk menjelajahi dan mengidentifikasi elemen-elemen tertentu pada dokumen.
- Akses dan Manipulasi Konten: Dengan DOM, skrip dapat mengambil dan memodifikasi elemen-elemen HTML. Misalnya, teks paragraf, nilai atribut, atau susunan elemen bisa diubah menggunakan JavaScript. Hal ini memungkinkan pembuatan halaman web yang dinamis, di mana konten dapat diperbarui seketika berdasarkan logika aplikasi.
- Interaktivitas dan Penanganan Event: DOM memungkinkan halaman web merespons aksi pengguna (seperti klik, input, hover) secara dinamis. Misalnya, pengembang bisa menambahkan event listener untuk tombol atau form, sehingga saat pengguna mengklik tombol, JavaScript akan menjalankan fungsi tertentu tanpa perlu memuat ulang halaman. Fitur ini krusial untuk membangun antarmuka web yang interaktif dan responsif.
- Manipulasi Gaya (Animasi Dinamis): DOM menyediakan akses untuk mengubah CSS elemen melalui skrip. Contohnya, properti gaya seperti warna, ukuran, atau posisi elemen bisa diubah secara programatik. Teknik ini memungkinkan pembuatan animasi dan efek visual yang dinamis, sehingga tata letak halaman dapat berubah mengikuti interaksi pengguna atau kondisi aplikasi.
Selain fungsi-fungsi tersebut, DOM juga berguna untuk hal-hal lain seperti menambah atau menghapus elemen HTML secara dinamis, dan pengelolaan struktur dokumen berbasis skrip. Dengan memahami fungsi-fungsi utama DOM, pengembang dapat membuat aplikasi web lebih interaktif, dinamis, dan user-friendly.
Baca Juga: Tutorial Penyimpanan Data Menggunakan Javascript LocalStorage
Cara Kerja DOM
Cara kerja DOM adalah dimulai saat browser mengurai (parsing) dokumen HTML ke dalam sebuah model objek. Ketika halaman web dimuat, browser akan membaca tag HTML dan membentuk DOM Tree. Setiap elemen seperti <div>, <span>, <p>, <button>, dan sebagainya menjadi sebuah node yang saling berhubungan sesuai dengan hierarki di dokumen. Sebagai contoh, <html> adalah node akar (root), di dalamnya terdapat <head> dan <body> sebagai node turunan, dan seterusnya hingga elemen teks di dalamnya.
Setelah pohon DOM ini terbentuk, JavaScript dapat berinteraksi dengan node-node tersebut. Misalnya:
<div id="pesan">Halo!</div> <script> // Mengakses elemen dengan id "pesan" dan mengubah teksnya document.getElementById("pesan").innerText = "Selamat Datang!"; </script>
Pada contoh di atas, document.getElementById("pesan") mengembalikan objek DOM yang mewakili <div id="pesan">. Kemudian properti innerText diubah, sehingga teks tampilan langsung diperbarui tanpa reload. Proses ini dijelaskan di sumber: JavaScript dapat mengubah elemen dengan metode seperti getElementById, innerText, dan appendChild. Semuanya terjadi secara langsung (real-time): begitu JavaScript mengeksekusi perintah, perubahan segera terlihat pada halaman. Begitulah cara DOM membuat pengembangan web menjadi efisien—kode statis HTML menjadi model dinamis yang bisa dikendalikan oleh skrip.
Selain itu, DOM juga menyediakan event seperti DOMContentLoaded untuk memastikan skrip berjalan setelah pohon DOM selesai dibangun. Pemahaman cara kerja DOM juga mencakup pemahaman bahwa DOM adalah bagian dari Web API di browser: meski tidak berasal dari inti JavaScript, DOM tersedia bagi setiap bahasa scripting yang berjalan di browser.
Contoh Manipulasi DOM dengan JavaScript
Untuk lebih memahami penggunaan DOM, berikut beberapa contoh kode JavaScript yang menunjukkan manipulasi DOM secara sederhana dan menengah. Contoh-contoh ini ditujukan agar pemula dapat melihat bagaimana element selection dan perubahan konten dilakukan.
Contoh Sederhana: Mengubah Teks dan Gaya
Misalnya ada elemen paragraf pada HTML:
<p id="intro">Teks awal</p> <button id="ubah">Ubah Teks</button>
Kita dapat mengubah teks paragraf saat tombol diklik:
<script> // Mengakses elemen paragraf dan tombol const paragraf = document.getElementById("intro"); const tombolUbah = document.getElementById("ubah"); // Menambahkan event listener untuk klik tombol tombolUbah.addEventListener("click", function() { // Mengubah teks paragraf melalui DOM paragraf.innerText = "Teks telah diubah!"; // Juga mengubah gaya teks menjadi warna biru paragraf.style.color = "blue"; }); </script>
Pada kode di atas, kita menggunakan getElementById() untuk mengambil elemen DOM berdasarkan atribut id. Kemudian properti innerText diubah untuk mengganti teks, dan properti style.color diubah untuk mengganti warna teks. Semua perubahan langsung diterapkan pada halaman. Metode seperti querySelector() atau querySelectorAll() juga umum digunakan sebagai alternatif, karena fleksibel dengan selektor CSS.
Contoh Menengah: Menambah Elemen dan Interaksi Kompleks
Dalam contoh lebih lanjut, kita bisa membuat daftar dan menambahkan item baru ke dalamnya secara dinamis:
<ul id="todolist"> <li>Belajar HTML</li> <li>Belajar CSS</li> </ul> <button id="tambah">Tambah Item</button> <script> const list = document.getElementById("todolist"); const tombolTambah = document.getElementById("tambah"); tombolTambah.addEventListener("click", function() { // Membuat elemen <li> baru const itemBaru = document.createElement("li"); itemBaru.innerText = "Belajar JavaScript"; // Teks untuk item baru // Menambah elemen <li> baru ke dalam <ul> list.appendChild(itemBaru); }); </script>
Kode ini memperlihatkan pembuatan elemen DOM baru dengan document.createElement("li"), lalu menambahkannya ke dalam daftar menggunakan appendChild(). Teknik ini berguna, misalnya, saat menambah data form tanpa reload. Kita juga bisa menggunakan removeChild() untuk menghapus elemen, atau setAttribute() untuk mengubah atribut elemen. Demikian pula, classList.add() atau classList.remove() sering dipakai untuk manipulasi kelas CSS secara dinamis.
Contoh Penggunaan querySelector
Selain cara di atas, metode querySelector sering dipakai untuk memilih elemen berdasarkan CSS selector. Contoh:
<div class="item">Item 1</div> <div class="item">Item 2</div> <script> // Mengakses elemen pertama dengan kelas "item" const firstItem = document.querySelector(".item"); firstItem.style.fontWeight = "bold"; // Mengakses semua elemen dengan kelas "item" const semuaItem = document.querySelectorAll(".item"); semuaItem.forEach(el => { el.style.backgroundColor = "lightgray"; }); </script>
querySelector() mengembalikan elemen pertama yang cocok dengan selector, sedangkan querySelectorAll() mengembalikan daftar (NodeList) semua elemen yang cocok. Metode ini sangat fleksibel karena mendukung selector CSS kompleks (misalnya .item:last-child atau #header > h1).
Dengan kode-kode di atas, diharapkan pembaca mengerti konsep dasar manipulasi DOM: memilih elemen, mengubah konten/gaya, serta menambah dan menghapus elemen. Ini adalah langkah awal penting sebelum menggunakan framework yang lebih kompleks.
Baca Juga: Menjelajahi Perbedaan JavaScript dan TypeScript
DOM dalam Framework Modern (React & Vue)
Pada era pengembangan modern, sebagian framework dan library JavaScript menggunakan Virtual DOM sebagai abstraksi untuk mengoptimalkan manipulasi DOM asli. React misalnya, menyimpan representasi virtual dari UI di memori dan menyinkronkannya dengan DOM asli saat dibutuhkan. Pendekatan ini memungkinkan React memberikan API deklaratif: Anda hanya mendeskripsikan tampilan yang diinginkan berdasarkan state, lalu React mengurus pembaruan DOM secara efisien. Konsep Virtual DOM tersebut mirip di Vue: Vue membangun Virtual DOM untuk komponen-komponennya, kemudian hanya melakukan pembaruan pada bagian-bagian yang berubah.
Karena Virtual DOM adalah mengurangi interaksi langsung dengan DOM asli, pengembang React/Vue jarang sekali memanipulasi DOM manual. Namun pemahaman dasar tentang DOM tetap penting. Tanpa memahami cara kerja DOM, sulit mengoptimalkan kode di framework tersebut. Sebagaimana dijelaskan, baik React maupun Vue memperbarui hanya elemen yang berubah pada Virtual DOM agar kinerja lebih cepat. Sementara itu, framework lain seperti Angular juga memiliki mekanisme serupa untuk efisiensi render. Intinya, DOM (atau Virtual DOM) adalah pondasi utama bagaimana framework modern membangun antarmuka pengguna.
Secara ringkas, React/Vue dan library modern mengasumsikan DOM sebagai layer dasar. React misalnya menggunakan ReactDOM untuk melakukan render ke DOM fisik, sedangkan Vue menggunakan Virtual DOM di balik layar. Kendati begitu, kode aplikasi tetap ditulis deklaratif (JSX/templating), bukan manipulasi DOM langsung. Dengan kata lain, React dan Vue menggunakan konsep DOM tapi mengelolanya secara otomatis.
Properti dan Metode Utama DOM
Berikut beberapa properti dan metode DOM yang sering digunakan oleh pengembang web:
document: Objek global yang merepresentasikan dokumen HTML secara keseluruhan. Ia menjadi titik awal akses ke DOM. Contohnyadocument.title(judul halaman),document.body(elemen<body>), ataudocument.forms(koleksi form).- Pemilihan Elemen: Metode seperti
getElementById(),getElementsByClassName(),getElementsByTagName(),querySelector(), danquerySelectorAll()memungkinkan pengembang menemukan elemen DOM. Sebagai contoh,document.querySelector(".item")mengambil elemen pertama dengan kelas “item”, sedangkandocument.getElementsByClassName("item")mengembalikan kumpulan elemen dengan kelas tersebut. - Isi Konten: Untuk mengubah isi elemen, properti
innerTextatautextContentdigunakan untuk teks, sementarainnerHTMLuntuk HTML di dalam elemen. Misalnya,element.innerHTML = "<strong>Halo</strong>"menyisipkan HTML baru ke dalam elemen. - Atribut dan Kelas: Metode
setAttribute(name, value)dangetAttribute(name)mengatur/mendapatkan atribut pada elemen. Sementara properticlassList(misalnyaelement.classList.add("aktif")) memungkinkan manipulasi kelas CSS dengan mudah. - Gaya (Style): Properti
element.stylememungkinkan mengubah gaya inline elemen. Contohnyaelement.style.color = "red"mengganti warna teks menjadi merah. Hal ini digunakan untuk membuat perubahan tampilan langsung lewat skrip. - Traversal DOM: Properti seperti
parentNode,children,nextSibling,firstChildmembantu menavigasi struktur DOM. Misalnyaelement.parentNodemendapat induk elemen, danelement.childrendaftar anak langsung. - Membuat/Modifikasi Node: Metode
document.createElement(tag)membuat elemen baru,document.createTextNode(text)untuk node teks. LaluappendChild(),insertBefore(),removeChild()digunakan untuk menambah, menyisipkan, atau menghapus node dalam DOM. Misalnyaparent.appendChild(child)menambahkanchildsebagai anak baru elemenparent. - Event Listener: Metode
addEventListener(eventType, callback)(contoh:element.addEventListener("click", handler)) digunakan untuk menangani event. Ini memungkinkan elemen merespons aksi pengguna. Sebagaimana dicontohkan sebelumnya, kita menggunakanaddEventListener("click", ...)untuk menangkap klik tombol dan menjalankan fungsi tanpa reload.
Penggunaan properti dan metode tersebut merupakan dasar interaksi dengan DOM dalam JavaScript. Dengan menguasai cara memilih elemen (querySelector/getElementById), mengubah konten (innerText/innerHTML), serta menambah atau menghapus elemen (createElement/appendChild), pengembang dapat menciptakan halaman web yang sangat dinamis dan interaktif. Semua ini didukung oleh API DOM yang konsisten.
Kesimpulan
DOM Adalah inti dari interaktivitas web. Dengan memahami DOM, pengembang dapat membuat halaman yang dinamis, mengubah elemen secara langsung, serta membangun aplikasi modern dengan React atau Vue lebih mudah. Kami telah membahas pengertian DOM, cara kerjanya, fungsi utama dalam web, serta properti-metode penting yang sering digunakan.
Apabila Anda tertarik mendalami pengembangan web secara menyeluruh, ikuti KelasFullstack di CodePolitan. KelasFullstack CodePolitan adalah kelas online belajar Fullstack Web Developer from A to Z. Kelas ini cocok untuk Anda yang ingin memiliki karir bagus, meningkatkan skill yang dibutuhkan industri, meraih gaji tinggi, dan mampu membuat aplikasi web sendiri. Lewat kurikulum yang lengkap (termasuk modul JavaScript DOM), Anda akan dibimbing hingga mahir dengan mentor berpengalaman. Kunjungi situs CodePolitan dan mulailah perjalanan Anda menjadi Fullstack Developer handal!
What do you think?
Reactions
