Saat kamu membuka sebuah halaman web, yang terlihat adalah teks, gambar, tombol, dan tautan yang tersusun rapi. Di balik tampilan yang rapi itu, browser sebenarnya sedang melakukan sesuatu yang cukup pintar: ia membaca HTML halaman tersebut, lalu mengubahnya menjadi sebuah struktur hidup yang bisa ia pantau, ubah, dan tanggapi. Struktur itu punya nama, dan namanya akan terus muncul begitu kamu mulai belajar pengembangan web. Namanya DOM.
Kalau kamu pernah mendengar istilah ini dan cuma mengangguk tanpa benar-benar paham maksudnya, artikel ini cocok buatmu. Kita akan bahas secara konseptual dan ramah pemula. Di akhir nanti, kamu akan punya gambaran yang jelas soal apa itu DOM, dari mana asalnya, dan kenapa hampir semua hal interaktif di web bergantung padanya.
DOM dalam satu kalimat
DOM adalah singkatan dari Document Object Model. Jangan sampai nama yang terdengar serius itu bikin gentar, karena ide di baliknya sebenarnya sederhana.
DOM adalah representasi dokumen HTML-mu yang hidup di dalam memori browser, dan disusun dalam bentuk pohon. Setiap bagian dari halaman, setiap tag, setiap potongan teks, berubah menjadi objek kecil yang bisa disimpan dan diolah oleh browser.
Ada dua kata kunci dalam kalimat itu yang memegang peran penting:
- Hidup artinya ini bukan salinan yang beku. Ketika halaman berubah, DOM ikut berubah.
- Di memori artinya ia ada di dalam memori komputer selama halaman terbuka, terpisah dari teks HTML asli yang dikirim server.
Bayangkan file HTML sebagai resep masakan yang ditulis di kertas, dan DOM sebagai masakan jadi yang dibuat browser dari resep itu. Resep sudah tetap begitu ditulis; tapi masakannya adalah sesuatu yang nyata dan bisa kamu nikmati sekarang.
Dari teks HTML menjadi pohon
HTML-mu lahir dalam bentuk teks biasa, sebuah rangkaian karakter yang panjang dengan tanda kurung sudut. Ini contoh kecilnya:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Saya</title>
</head>
<body>
<h1>Halo</h1>
<p>Selamat datang di <a href="/tentang">situs kami</a>.</p>
</body>
</html>Begitu browser menerima teks ini, ia membacanya dari atas ke bawah lalu menguraikannya (parsing). Parsing intinya cuma memahami strukturnya: mencari tahu tag mana yang berada di dalam tag mana. Hasil dari proses itu adalah sebuah pohon.
Kenapa pohon? Karena HTML memang bersarang secara alami. Tag <html> memuat <head> dan <body>. Tag <body> memuat <h1> dan <p>. Tag <p> memuat teks dan sebuah tautan <a>. Sesuatu di dalam sesuatu yang lain, bercabang keluar, persis seperti silsilah keluarga atau bagan organisasi.
Berikut contoh di atas digambar sebagai pohon yang dibangun browser di memori:
Document
└── html
├── head
│ └── title
│ └── "Halaman Saya"
└── body
├── h1
│ └── "Halo"
└── p
├── "Selamat datang di "
├── a (href="/tentang")
│ └── "situs kami"
└── "."Setiap kotak dalam diagram itu disebut node (simpul). Keseluruhannya adalah pohon DOM, dan itulah model kerja halamanmu di mata browser.
DOM dibangun dari HTML, bukan sama persis dengan HTML
HTML-mu adalah masukan. DOM adalah hasil yang dibuat browser setelah membacanya. Keduanya biasanya mirip, tapi browser juga diam-diam akan membetulkan kesalahan kecil (misalnya tag penutup yang lupa ditulis) saat membangun pohon, sehingga DOM bisa sedikit berbeda dari HTML mentah yang kamu tulis.
Apa itu node?
Node adalah satu item apa pun di dalam pohon DOM. Katanya terdengar teknis, tapi node sebenarnya hanya satu titik pada pohon, seperti satu kotak dalam diagram tadi.
Tidak semua node jenisnya sama. Berikut yang paling sering kamu temui sebagai pemula:
| Jenis node | Yang diwakili | Contoh dari atas |
|---|---|---|
| Document | Seluruh halaman, akar dari segalanya | Document |
| Element | Satu tag HTML | <h1>, <p>, <a> |
| Text | Teks asli di dalam sebuah tag | "Halo", "situs kami" |
| Attribute | Pengaturan pada sebuah elemen | href="/tentang" |
Jenis yang paling umum adalah node elemen, yaitu tag dari HTML-mu yang berubah menjadi objek. Teks yang kamu baca di layar tinggal di dalam node teks, yang berada di dalam elemennya. Jadi, kata “Halo” sebenarnya bukan bagian dari tag <h1> itu sendiri di dalam pohon; ia adalah node teks tersendiri yang dipegang oleh elemen <h1> sebagai anaknya.
Istilah keluarga: induk, anak, saudara
Karena DOM berbentuk pohon, browser meminjam istilah kekeluargaan untuk menggambarkan hubungan antarnode. Istilah ini sering sekali muncul, jadi sebaiknya kamu mulai terbiasa sekarang.
- Induk (parent) adalah node yang memuat node lain. Pada contoh kita,
<body>adalah induk dari<h1>dan<p>. - Anak (child) adalah node yang berada langsung di dalam node lain.
<h1>dan<p>adalah anak dari<body>. - Saudara (sibling) adalah node yang punya induk sama.
<h1>dan<p>adalah saudara. - Leluhur (ancestor) adalah node mana pun di atasmu dalam rantai (induk, kakek, dan seterusnya), sedangkan keturunan (descendant) adalah node mana pun di bawahmu.
body ← induk
/ \
h1 p ← anak dari body, saudara satu sama lain
\
a ← anak dari p, keturunan dari bodyKosakata ini bukan sekadar hafalan. Nanti, ketika kamu menyuruh browser “cari induk dari elemen ini” atau “lewati semua anak dari daftar itu”, kamu sedang menjelajahi pohon DOM lewat hubungan-hubungan inilah persisnya.
Kenapa kata “hidup” begitu penting
Inilah bagian yang membuat DOM bertenaga, bukan sekadar diagram yang bagus. DOM itu hidup selama halaman terbuka. Browser memakainya sebagai satu-satunya acuan kebenaran soal apa yang harus ditampilkan di layar. Kalau DOM berubah, layar pun ikut berubah menyesuaikan, nyaris seketika.
Hubungan dua arah itulah inti dari semuanya:
teks HTML ──parse──▶ pohon DOM ──render──▶ Yang kamu lihat
▲ │
└──── ubah node ─────────┘Jadi ketika sebuah tombol muncul setelah kamu klik, ketika sebuah formulir menampilkan pesan error berwarna merah, ketika sebuah barang meluncur masuk ke keranjang belanja, semua itu tidak perlu memuat ulang halaman atau mengambil HTML baru. Browser cukup mengubah sebuah node di DOM, dan tampilan langsung mengikuti.
DOM adalah jembatan antara kode dan layar
Setiap kali sebuah halaman bereaksi terhadapmu tanpa memuat ulang sepenuhnya, ada node di DOM yang baru saja diubah. Itulah mekanisme di balik hampir setiap fitur interaktif di web modern.
Siapa yang mengubah DOM?
Sebagian besarnya, JavaScript-lah pelakunya. Browser menyodorkan pohon DOM kepada JavaScript sebagai sekumpulan objek yang bisa dibaca dan ditulis ulang: menambah node baru, menghapus satu node, mengubah teks di dalam sebuah node, atau membalik nilai sebuah atribut. Setiap perubahan itu langsung merembet ke apa yang dilihat pengunjung.
Artikel ini sengaja membahas apa itu DOM, bukan langkah demi langkah cara memanipulasinya lewat kode. Kalau kamu sudah siap praktik dan benar-benar membaca serta mengubah node dengan JavaScript, bagian itu dibahas terpisah di DOM di JavaScript. Untuk sekarang, poin pentingnya cukup ini: JavaScript adalah alat yang melakukan penyuntingan, dan DOM adalah hal yang disunting.
Perlu kamu tahu juga bahwa DOM bukan milik satu perusahaan tertentu. Ia adalah standar bersama, dan itulah sebabnya JavaScript yang sama untuk menyunting sebuah halaman bisa bekerja di browser yang berbeda-beda. Tim seperti ACY Partner Indonesia bisa membangun satu situs dan yakin perilakunya konsisten, entah pengunjung memakai Chrome, Firefox, Safari, atau Edge.
Satu analogi singkat untuk merangkainya
Bayangkan sebuah bangunan. Cetak biru sang arsitek adalah HTML-mu: rencana tetap di atas kertas. Setelah bangunan itu jadi, kamu punya struktur nyata dengan ruangan, pintu, dan lampu, itulah DOM. Sekarang kamu bisa berjalan ke dalamnya, menyalakan dan mematikan lampu, serta memindahkan perabot, dan bangunan itu berubah secara langsung. Cetak birunya tetap sama di kertas, tapi bangunan sungguhannya menanggapi apa yang kamu lakukan.
JavaScript adalah orang yang menekan sakelar dan memindahkan perabot. DOM adalah bangunan yang bereaksi. Dan apa yang kamu lihat di layar hanyalah dirimu, berdiri di dalam, menyaksikan ruangan-ruangan itu berubah.
Rangkuman
Mari kumpulkan ide-ide intinya di satu tempat:
- DOM adalah singkatan dari Document Object Model, yaitu pohon hidup di memori browser yang dibangun dari HTML-mu.
- Browser menguraikan (parse) teks HTML lalu mengubah tag-tagnya yang bersarang menjadi pohon berisi node.
- Node adalah satu item di dalam pohon itu; jenis yang umum adalah node document, element, text, dan attribute.
- Antarnode saling berhubungan sebagai induk, anak, dan saudara, istilah keluarga yang sama yang nanti kamu pakai untuk menjelajahi halaman.
- DOM itu hidup: ubah sebuah node, layar pun ikut berubah, dan itulah yang membuat halaman interaktif jadi mungkin.
- JavaScript adalah alat yang biasa dipakai untuk mengubah DOM, dan DOM adalah standar bersama sehingga bekerja sama di berbagai browser.
Begitu gambaran ini terasa mantap, langkah berikutnya yang wajar adalah melihatnya beraksi langsung, membuka halaman sungguhan dan mengamati node-node dibuat, diubah, dan dihapus. Saat kamu sudah siap masuk ke sisi praktiknya, DOM di JavaScript menuntunmu persis bagaimana caranya.
