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*](https://www.quora.com/What-does-it-mean-when-we-say-algorithm-is-a-programming-independent-language) 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

![](https://apps.codepolitan.com/sites/learn/uploads/original/202308/pengertian_dom.png)

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*](https://www.w3schools.com/js/js_htmldom_eventlistener.asp) 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](https://www.codepolitan.com/blog/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:

```html
<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:

```html
<p id="intro">Teks awal</p>
<button id="ubah">Ubah Teks</button>
```

Kita dapat mengubah teks paragraf saat tombol diklik:

```html
<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:

```html
<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:

```html
<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](https://www.codepolitan.com/blog/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. Contohnya `document.title` (judul halaman), `document.body` (elemen `<body>`), atau `document.forms` (koleksi form).
* **Pemilihan Elemen**: Metode seperti `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, `querySelector()`, dan `querySelectorAll()` memungkinkan pengembang menemukan elemen DOM. Sebagai contoh, `document.querySelector(".item")` mengambil elemen pertama dengan kelas “item”, sedangkan `document.getElementsByClassName("item")` mengembalikan kumpulan elemen dengan kelas tersebut.
* **Isi Konten**: Untuk mengubah isi elemen, properti `innerText` atau `textContent` digunakan untuk teks, sementara `innerHTML` untuk HTML di dalam elemen. Misalnya, `element.innerHTML = "<strong>Halo</strong>"` menyisipkan HTML baru ke dalam elemen.
* **Atribut dan Kelas**: Metode `setAttribute(name, value)` dan `getAttribute(name)` mengatur/mendapatkan atribut pada elemen. Sementara properti `classList` (misalnya `element.classList.add("aktif")`) memungkinkan manipulasi kelas CSS dengan mudah.
* **Gaya (Style)**: Properti `element.style` memungkinkan mengubah gaya inline elemen. Contohnya `element.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`, `firstChild` membantu menavigasi struktur DOM. Misalnya `element.parentNode` mendapat induk elemen, dan `element.children` daftar anak langsung.
* **Membuat/Modifikasi Node**: Metode `document.createElement(tag)` membuat elemen baru, `document.createTextNode(text)` untuk node teks. Lalu `appendChild()`, `insertBefore()`, `removeChild()` digunakan untuk menambah, menyisipkan, atau menghapus node dalam DOM. Misalnya `parent.appendChild(child)` menambahkan `child` sebagai anak baru elemen `parent`.
* **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 menggunakan `addEventListener("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.

[![](https://image.web.id/images/belajar-coding-gratis.png)](https://www.kelasfullstack.id/)

Apabila Anda tertarik mendalami pengembangan web secara menyeluruh, ikuti [**KelasFullstack**](https://www.kelasfullstack.id/) 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!

Mengenal Pengertian DOM Adalah: Fungsi & Cara Kerjanya!

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Program Beasiswa Belajar Generative AI Chapter 4 hadir sebagai kelanjutan dari komitmen jangka panjang kolaborasi antara CODEPOLITAN dengan mitra global: Google.org, AVPN, dan Asian Development Bank (ADB). Program ini tetap dijalankan secara terpusat melalui ekosistem RuangAI.

Pada Chapter 4 ini, kami membawa semangat kolaborasi ke tingkat yang lebih tinggi. Selain tetap menyediakan kurikulum fundamental Generative AI berstandar Google untuk empat kategori utama peserta (Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM), RuangAI kini melakukan ekspansi strategis dengan menggandeng berbagai komunitas di seluruh Indonesia.

Program beasiswa fundamental Generative AI berstandar Google untuk Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM yang siap naik level di era AI.

Beasiswa Belajar Generative AI Chapter 4

DevHandal 2026 adalah program beasiswa hasil kolaborasi strategis antara CODEPOLITAN dan Tencent EdgeOne. Kami hadir untuk menjembatani developer lokal dengan teknologi infrastruktur kelas dunia, membekali kamu dengan keahlian Edge Computing dan Full Stack AI agar tetap adaptif di era AI dan siap bersaing di industri global.

Dapatkan beasiswa gratis untuk 1.200 pendaftar terpilih. Tuntaskan misinya, buka akses kelas eksklusif Full Stack AI & Edge Computing, dan raih kesempatan menang berbagai hadiah menarik setiap minggunya!

Mengenal Pengertian DOM Adalah: Fungsi & Cara Kerjanya!

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

ChatGPT adalah Kawan atau Lawan Bagi Programmer?

Belajar Membangun Proyek Open Source, Emang bisa?

13+ Rahasia Dibalik Skills Frontend Developer di Buru Perusahaan

10 Tips & Trik Penggunaan Shortcut Vscode, Pelajari Yuk!

Cara Menghapus Commit Git: Panduan Praktis dan Terbaik!

Tingkatkan Teknologi AI, Indonesia Jalin Kerjasama dengan AS