DOM (Document Object Model) adalah representasi halaman HTML sebagai struktur objek berbentuk pohon (tree) yang bisa dibaca dan diubah oleh JavaScript secara langsung (live). Ketika browser memuat sebuah halaman, ia tidak hanya menampilkan teks HTML begitu saja, browser menerjemahkan setiap tag menjadi objek yang saling terhubung, lalu menyimpannya di memori sebagai sebuah pohon. Pohon inilah yang disebut DOM, dan JavaScript memakainya sebagai “pegangan” untuk mengambil elemen, mengganti teks, mengubah warna, menyembunyikan sesuatu, atau menambah elemen baru, semuanya tanpa perlu me-reload halaman.

Kalau kamu pernah melihat angka keranjang belanja bertambah saat mengklik “tambah”, menu yang muncul saat di-hover, atau notifikasi yang tiba-tiba nongol, itu semua adalah JavaScript yang mengubah DOM. Di panduan ini kita akan bahas dari nol: apa itu DOM, kenapa ia penting, cara memilih elemen, cara mengubahnya, hubungannya dengan event, perbedaan DOM dan HTML, sampai kesalahan umum yang sering bikin pemula bingung. Kalau kamu belum kenal JavaScript sama sekali, ada baiknya baca dulu apa itu javascript supaya konteksnya lebih nyambung.

Apa Itu DOM?

Bayangkan HTML sebagai blueprint atau cetak biru sebuah rumah, sebuah dokumen statis berisi teks yang mendeskripsikan apa saja yang ada: dinding di sini, pintu di situ, jendela di sana. Blueprint itu penting, tapi ia hanya kertas; kamu tidak bisa membuka pintunya. Nah, DOM adalah model hidup dari blueprint tersebut, rumah sungguhan yang sudah berdiri, di mana setiap pintu bisa dibuka, setiap lampu bisa dinyalakan, dan setiap ruangan bisa diubah isinya. JavaScript adalah penghuni yang berjalan-jalan di dalam rumah itu dan mengubah apa pun yang ia mau.

Secara teknis, browser mengambil HTML-mu lalu membangun sebuah pohon node (node tree). Setiap tag HTML menjadi sebuah node, dan node-node ini punya hubungan keluarga: ada parent (induk), child (anak), dan sibling (saudara). Perhatikan struktur HTML sederhana ini:

<body>
  <div id="kartu">
    <h3>Judul</h3>
    <p>Paragraf isi.</p>
  </div>
</body>

Di dalam DOM, susunannya menjadi pohon seperti ini: body adalah induk dari div, div adalah induk dari h3 dan p, sedangkan h3 dan p adalah saudara (siblings). JavaScript bisa “berjalan” di sepanjang pohon ini, naik ke induk, turun ke anak, atau lompat ke saudara, untuk menemukan dan mengubah elemen mana pun yang ia butuhkan.

Kenapa DOM Penting?

DOM penting karena inilah satu-satunya cara JavaScript mengubah apa yang dilihat pengguna tanpa reload halaman. Tanpa DOM, halaman web akan sepenuhnya statis: setiap perubahan kecil (misalnya menampilkan pesan error di form) mengharuskan browser mengunduh ulang seluruh halaman dari server. Itu lambat dan boros.

Dengan DOM, JavaScript bisa mengubah satu bagian kecil halaman secara instan sambil membiarkan sisanya tetap utuh. Ketik di kolom pencarian dan lihat saran muncul seketika, klik “suka” dan lihat hatinya berubah merah, gulir ke bawah dan konten baru dimuat otomatis, semuanya adalah operasi DOM. Inilah fondasi dari setiap aplikasi web interaktif yang kamu pakai setiap hari. Bahkan framework raksasa seperti React, Vue, dan Svelte pada dasarnya hanyalah cara yang lebih rapi untuk melakukan manipulasi DOM di balik layar.

Cara Memilih Elemen di DOM

Sebelum bisa mengubah sebuah elemen, JavaScript harus menemukannya dulu di dalam pohon DOM. Ini disebut memilih atau menyeleksi elemen. Ada tiga cara yang paling sering dipakai:

// 1. Berdasarkan id (unik), mengembalikan satu elemen
const judul = document.getElementById("judul")

// 2. querySelector, pakai sintaks CSS selector, ambil yang PERTAMA cocok
const kartu = document.querySelector(".kartu")   // pilih class .kartu
const utama = document.querySelector("#judul")   // pilih id #judul

// 3. querySelectorAll, ambil SEMUA yang cocok (berupa daftar)
const semuaParagraf = document.querySelectorAll("p")

Perbedaan pentingnya: getElementById khusus untuk id dan langsung menerima nama id-nya (tanpa tanda #). Sedangkan querySelector dan querySelectorAll jauh lebih fleksibel karena memakai sintaks CSS selector yang sama seperti yang kamu pakai di file CSS, .namaKelas untuk class, #namaId untuk id, atau sekadar p untuk tag. Karena fleksibilitas inilah querySelector menjadi pilihan paling populer di kode modern.

Setelah elemen berhasil dipilih dan disimpan ke dalam variabel, kamu punya “pegangan” ke elemen itu, dan dari sini kamu bisa mulai mengubahnya. Yuk langsung coba sendiri dengan playground di bawah ini. Setiap tombol menjalankan satu perintah DOM sungguhan pada elemen <h3 id="judul">, dan baris JavaScript-nya ditampilkan di bar bawah supaya kamu bisa menghubungkan perintah dengan efeknya:

Coba Sendiri

Halo Dunia

JS ›// klik tombol untuk menjalankan perintah DOM

Perhatikan bagaimana setiap klik langsung mengubah elemen di atas. Itulah persis yang terjadi di halaman web sungguhan, JavaScript mengeksekusi perintah, DOM berubah, dan layar ikut berubah seketika. Kalau kamu ingin latihan yang lebih terstruktur dan bisa langsung dikerjakan di browser, lanjutkan ke materi DOM manipulation di Hyper Sheets.

Cara Mengubah Elemen DOM

Setelah punya pegangan ke sebuah elemen, ada banyak properti yang bisa kamu ubah. Inilah yang paling sering dipakai sehari-hari:

Mengubah teks dengan textContent, ini cara paling aman untuk mengganti isi teks sebuah elemen:

const judul = document.getElementById("judul")
judul.textContent = "Judul Baru!"   // ganti isi teksnya

Mengubah HTML dengan innerHTML, mirip textContent, tapi ia menafsirkan string sebagai HTML sungguhan (bisa berisi tag):

judul.innerHTML = "<em>Judul miring</em>"   // tag <em> aktif

Mengubah gaya (style) langsung lewat properti style:

judul.style.color = "#f97316"      // ubah warna teks
judul.style.display = "none"       // sembunyikan elemen
judul.style.display = ""           // tampilkan lagi

Mengubah class lewat classList, cara terbaik untuk menerapkan gaya yang sudah didefinisikan di CSS:

judul.classList.add("highlight")     // tambah class
judul.classList.remove("highlight")  // hapus class
judul.classList.toggle("highlight")  // ada -> hapus, tidak ada -> tambah

Mengubah atribut lewat setAttribute, untuk mengganti href, src, disabled, dan sejenisnya:

const gambar = document.querySelector("img")
gambar.setAttribute("src", "logo-baru.png")

Menggunakan classList biasanya lebih rapi daripada style langsung, karena kamu memisahkan tampilan (di CSS) dari perilaku (di JavaScript). JavaScript cukup menambah atau mencabut sebuah class, dan CSS yang mengurus detail gayanya.

Event dan DOM: Membuat Halaman Merespons

Sampai sini kamu sudah bisa memilih dan mengubah elemen, tapi kapan perubahan itu terjadi? Jawabannya: sebagai respons terhadap event, yaitu kejadian seperti klik, ketikan, atau gerakan mouse. JavaScript “mendengarkan” event dengan addEventListener, lalu menjalankan fungsi yang mengubah DOM:

const tombol = document.getElementById("tombol")
const judul = document.getElementById("judul")

// Saat tombol diklik, ubah teks judul
tombol.addEventListener("click", () => {
  judul.textContent = "Kamu mengklik tombolnya!"
})

Inilah pola inti setiap aplikasi web interaktif: pengguna melakukan sesuatu (event) → JavaScript menangkapnya → JavaScript mengubah DOM → layar berubah. Playground di atas melakukan hal yang persis sama, klik adalah event, dan tiap tombol mengubah state elemen. Menguasai kombinasi event dan DOM adalah momen ketika kamu benar-benar bisa membangun aplikasi web sungguhan.

DOM vs HTML: Apa Bedanya?

Ini pertanyaan yang sering muncul dan penting dipahami. HTML adalah teks statis, file .html berisi karakter yang kamu tulis dan kirim dari server. DOM adalah objek hidup, struktur di memori browser yang dibangun dari HTML, tapi bisa berubah setelahnya.

Analoginya: HTML itu seperti resep tertulis di buku masak, sedangkan DOM adalah masakan yang sudah jadi dan bisa kamu tambahi garam, kurangi, atau hias ulang. Begitu halaman dimuat, HTML sudah selesai tugasnya; sejak saat itu JavaScript hanya berurusan dengan DOM.

Konsekuensi praktisnya: kalau JavaScript menambah sebuah paragraf lewat DOM, paragraf itu muncul di layar tapi tidak akan terlihat kalau kamu membuka “View Source” (yang menampilkan HTML asli dari server). Untuk melihat DOM yang sesungguhnya beserta perubahannya, kamu harus membuka tab Elements di Developer Tools. HTML adalah titik awal; DOM adalah kondisi terkini. Kalau fondasi HTML-mu masih goyah, perkuat dulu lewat belajar html pemula.

Kesalahan Umum Seputar DOM

Setiap pemula pasti terjebak di kesalahan yang mirip-mirip saat pertama kali menyentuh DOM. Mengenalinya lebih awal akan menghemat banyak waktu frustrasi:

1. Memilih elemen sebelum elemen itu ada. Kalau tag <script> diletakkan di dalam <head> dan langsung mencoba document.getElementById("judul"), hasilnya null, karena saat script itu jalan, elemen <h3> belum dibuat browser. Ini penyebab error “Cannot read properties of null” yang paling sering.

const judul = document.getElementById("judul")
judul.textContent = "Halo"   // ERROR kalau judul masih null

2. Memakai innerHTML padahal cukup textContent. Selain berisiko XSS, innerHTML juga lebih lambat karena browser harus mem-parsing ulang string sebagai HTML. Kalau kamu cuma mengganti teks biasa, textContent lebih cepat dan aman.

3. Salah menulis selector. getElementById("judul") tidak pakai tanda #, tapi querySelector("#judul") harus pakai #. Untuk class, querySelector(".kartu") harus pakai titik. Salah satu tanda ini dan elemenmu tidak akan ketemu (mengembalikan null).

Cek Pemahaman

Diberikan elemen <p class="pesan">Halo</p>, manakah cara yang BENAR untuk memilihnya dengan JavaScript?

FAQ Seputar DOM

DOM adalah apa dengan bahasa sederhana?

DOM adalah “peta hidup” halaman web yang dibuat browser dari HTML-mu. Bayangkan HTML sebagai daftar bahan, dan DOM sebagai masakan jadi yang bisa kamu ubah kapan saja. JavaScript memakai DOM ini untuk mengambil elemen, mengganti teks, mengubah warna, atau menambah bagian baru, semuanya langsung terlihat di layar tanpa reload halaman.

Apa itu DOM dalam JavaScript?

Dalam konteks JavaScript, DOM adalah kumpulan objek yang mewakili setiap elemen di halaman, dengan objek utama bernama document. Lewat document, JavaScript bisa memilih elemen (getElementById, querySelector) lalu membaca atau mengubah propertinya. DOM adalah jembatan antara kode JavaScript-mu dan tampilan yang dilihat pengguna.

Apa perbedaan DOM dan HTML?

HTML adalah teks statis yang kamu tulis dan kirim dari server; DOM adalah struktur objek hidup yang dibangun browser dari HTML itu di memori. HTML tidak berubah setelah dikirim, tapi DOM bisa terus diubah oleh JavaScript. Perubahan pada DOM terlihat di tab Elements pada Developer Tools, tapi tidak muncul di “View Source” yang menampilkan HTML asli.

Document Object Model itu apa?

Document Object Model (DOM) adalah standar resmi yang mendefinisikan bagaimana dokumen HTML direpresentasikan sebagai objek dan bagaimana program bisa mengaksesnya. “Document” merujuk pada halaman, “Object” karena setiap elemen menjadi objek, dan “Model” karena strukturnya berbentuk pohon. Ini adalah Web API yang disediakan browser, bukan bagian dari bahasa JavaScript itu sendiri.

Apa itu DOM manipulation?

DOM manipulation adalah tindakan mengubah isi, gaya, atau struktur halaman lewat JavaScript dengan mengakses DOM. Contohnya mengganti teks dengan textContent, mengubah warna dengan style, menambah class dengan classList, atau membuat elemen baru dengan createElement. Ini adalah keterampilan inti yang menjadi fondasi semua framework frontend modern.

Apakah harus belajar DOM sebelum React?

Sangat disarankan. React dan framework lain pada dasarnya mengotomatiskan DOM manipulation, tapi memahami cara kerjanya secara manual membuatmu jauh lebih paham apa yang terjadi di balik layar. Ketika framework berperilaku tak terduga, developer yang mengerti DOM tidak akan “buta”. Kuasai dulu dasar DOM lewat latihan interaktif di Hyper Sheets sebelum melompat ke framework.

Penutup

DOM adalah salah satu konsep paling fundamental dalam web development, begitu kamu paham bahwa halaman web sebenarnya adalah pohon objek hidup yang bisa diubah JavaScript kapan saja, banyak hal lain jadi masuk akal. Mulai dari yang sederhana: pilih sebuah elemen, ganti teksnya, ubah warnanya. Lalu tambahkan event supaya perubahan itu terjadi sebagai respons terhadap pengguna. Dari sana, kamu sudah punya semua bahan untuk membangun aplikasi web interaktif yang sesungguhnya.

Teruslah bereksperimen, buka Developer Tools, ketik perintah DOM di Console, dan lihat halaman berubah di depan matamu. Cara belajar DOM yang paling efektif bukan menghafal, melainkan mencoba langsung dan memperhatikan apa yang terjadi.