📚 Seri Belajar JavaScript · Artikel 6 dari 14

DOM: Cara JavaScript Mengontrol Elemen HTML di Halaman Web

Pelajari bagaimana DOM JavaScript manipulasi HTML — dari memilih elemen, mengubah teks, hingga menambah atau menghapus elemen secara dinamis.

#JavaScript #DOM #HTML #WebDev #BeginnerFriendly

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula

📅

Diperbarui

2026

Pernah kepikiran, bagaimana bisa sebuah tombol di website bisa mengubah teks, menampilkan pesan, atau bahkan mengganti warna latar belakang — semua tanpa reload halaman? Jawabannya ada di tangan JavaScript, dan senjata utamanya bernama DOM JavaScript manipulasi HTML. DOM (Document Object Model) adalah jembatan ajaib yang menghubungkan JavaScript dengan struktur HTML halaman webmu. Kalau kamu sudah pernah belajar HTML dan mulai ingin halaman webmu jadi "hidup" — artikel ini persis untuk kamu! Kita akan belajar step by step, dengan analogi yang mudah dipahami dan contoh kode yang langsung bisa kamu coba.

📌 Definisi Utama

DOM (Document Object Model)

DOM adalah representasi terstruktur dari halaman HTML dalam bentuk pohon objek (tree). Setiap elemen HTML — dari <h1> sampai <p> — menjadi sebuah "node" yang bisa diakses, diubah, ditambah, atau dihapus oleh JavaScript secara real-time tanpa perlu reload.

🌳 DOM Itu Seperti Pohon Keluarga HTML Kamu

Bayangkan sebuah rumah. Di dalamnya ada ruang tamu, kamar tidur, dapur. Setiap ruangan punya perabotan. Nah, HTML adalah denah rumah itu — menentukan struktur dan tata letak. DOM adalah rumah yang sudah jadi, lengkap dengan semua perabotan yang bisa kamu pindah-pindah, ganti warna, atau bahkan buang tanpa harus membangun ulang rumahnya dari awal.

Dalam konteks web: browser membaca file HTML-mu, lalu membangun struktur DOM di memori. JavaScript kemudian bisa "masuk ke dalam rumah itu" dan melakukan apapun yang kamu perintahkan — mengubah teks, menyembunyikan elemen, atau menambah tombol baru.

📐 Struktur Pohon DOM

document
  └── <html>
        ├── <head>
        │     └── <title> "Halaman Ku" </title>
        └── <body>
              ├── <h1> "Halo Dunia!" </h1>
              ├── <p> "Ini paragraf pertama" </p>
              └── <div id="kotak">
                    └── <button> "Klik Aku" </button>

🔥 Fakta Menarik

DOM bukan bagian dari JavaScript murni — ia adalah Web API yang disediakan browser. Artinya, DOM ada di browser, bukan di Node.js secara default. Itulah kenapa kode manipulasi HTML tidak bisa langsung dijalankan di terminal!

🎯 Cara Mengakses Elemen HTML dengan DOM JavaScript

Sebelum bisa memanipulasi elemen, kamu harus bisa menemukannya dulu. DOM menyediakan beberapa cara untuk memilih elemen — mirip seperti kamu mencari orang di keramaian: bisa berdasarkan nama, pakaian, atau nomor tempat duduk.

Metode	Berdasarkan	Contoh	Hasil
`getElementById()`	Atribut ID	`getElementById("judul")`	1 Elemen
`querySelector()`	CSS Selector	`querySelector(".kartu")`	1 Elemen Pertama
`querySelectorAll()`	CSS Selector	`querySelectorAll("li")`	NodeList (Semua)
`getElementsByClassName()`	Nama Class	`getElementsByClassName("btn")`	HTMLCollection

💡 Tips

Di dunia modern, gunakan querySelector() dan querySelectorAll() sebagai pilihan utama. Keduanya menerima CSS selector yang sudah kamu kenal dari belajar CSS, jadi kurva belajarnya jauh lebih landai!

⚙️ DOM JavaScript Manipulasi HTML: Panduan Step-by-Step

Sekarang masuk ke bagian seru! Kita akan belajar manipulasi HTML lewat DOM JavaScript — mengubah teks, mengubah style, menambah elemen baru, dan menghapus elemen. Semua dengan contoh kode yang langsung bisa kamu praktikkan.

Mengubah Teks dan Konten Elemen

Gunakan textContent untuk teks biasa, dan innerHTML jika kamu ingin menyisipkan HTML di dalamnya.

📄 HTML

<h1 id="judul">Teks Lama</h1>
<p id="deskripsi">Paragraf ini akan berubah.</p>
<button onclick="ubahKonten()">Ubah Teks</button>

⚡ JavaScript

function ubahKonten() {
  const judul = document.getElementById("judul");
  const deskripsi = document.getElementById("deskripsi");
  
  judul.textContent = "Teks Sudah Berubah! 🎉";
  deskripsi.innerHTML = "Paragraf ini sekarang punya <strong>teks tebal</strong>!";
}

Mengubah Style (CSS) Lewat DOM

Akses properti .style untuk mengubah tampilan elemen secara langsung. Nama properti CSS yang pakai tanda pisah (background-color) berubah jadi camelCase (backgroundColor).

const kotak = document.querySelector("#kotak");

// Ubah warna latar belakang
kotak.style.backgroundColor = "#6366f1";

// Ubah ukuran font
kotak.style.fontSize = "24px";

// Sembunyikan elemen
kotak.style.display = "none";

// Tampilkan kembali
kotak.style.display = "block";

Menambah dan Menghapus Elemen HTML

Ini bagian yang bikin DOM JavaScript manipulasi HTML terasa seperti sihir — kamu bisa membuat elemen baru dari nol dan menyisipkannya ke halaman!

// 1. Buat elemen baru
const paragrafBaru = document.createElement("p");

// 2. Isi dengan teks
paragrafBaru.textContent = "Paragraf ini lahir dari JavaScript!";

// 3. Beri class untuk styling
paragrafBaru.classList.add("teks-baru");

// 4. Sisipkan ke dalam elemen induk
const container = document.querySelector("#container");
container.appendChild(paragrafBaru);

// 5. Hapus elemen
paragrafBaru.remove(); // atau: container.removeChild(paragrafBaru)

Manipulasi Atribut dan Class

Kamu bisa menambah, menghapus, atau mengecek class CSS — sangat berguna untuk membuat toggle tampilan elemen (misalnya: mode gelap/terang).

const tombol = document.querySelector("#tombol-tema");

// Tambah class
tombol.classList.add("aktif");

// Hapus class
tombol.classList.remove("aktif");

// Toggle class (ada → hapus, tidak ada → tambah)
tombol.classList.toggle("dark-mode");

// Ubah / baca atribut
tombol.setAttribute("disabled", "true");
const href = linkEl.getAttribute("href");

⚡ Insight Penting

Gunakan classList.toggle() untuk fitur seperti tombol dark mode atau menu hamburger. Satu baris kode ini menggantikan banyak kondisi if/else yang membingungkan!

🚀 Proyek Mini: Konter Klik Interaktif

Teori sudah, sekarang kita satukan semua konsep dalam satu mini proyek: sebuah konter klik yang hitungannya berubah setiap kamu klik tombol, warnanya berubah jika melewati batas tertentu, dan bisa direset. Ini contoh DOM JavaScript manipulasi HTML yang paling umum dijumpai di dunia nyata.

konter.html

<!-- HTML -->
<div id="tampilan">0</div>
<button onclick="tambah()">➕ Tambah</button>
<button onclick="reset()">🔄 Reset</button>

<!-- JavaScript -->
<script>
  let angka = 0;
  const tampilan = document.getElementById("tampilan");

  function tambah() {
    angka++;
    tampilan.textContent = angka;

    // Ubah warna jika angka melebihi 10
    if (angka > 10) {
      tampilan.style.color = "#ef4444"; // merah
    } else {
      tampilan.style.color = "#10b981"; // hijau
    }
  }

  function reset() {
    angka = 0;
    tampilan.textContent = angka;
    tampilan.style.color = "#1e1b4b"; // kembali ke warna awal
  }
</script>

⚠️ Perhatian

Jangan gunakan innerHTML untuk menyisipkan data yang berasal dari input pengguna tanpa disanitasi. Ini bisa membuka celah keamanan yang disebut XSS (Cross-Site Scripting). Untuk teks biasa, selalu pakai textContent!

🔍 Analisis: textContent vs innerHTML

textContent

Hanya teks murni
Aman dari XSS
Tag HTML tidak dirender
Cocok untuk data pengguna

innerHTML

Bisa menyisipkan HTML
Potensi XSS jika tidak hati-hati
Tag HTML akan dirender
Cocok untuk konten trusted

🔥 Fakta Menarik

Framework populer seperti React, Vue, dan Angular semuanya bekerja di atas DOM — mereka hanya menambahkan lapisan abstraksi yang lebih cerdas (Virtual DOM). Jadi, dengan belajar DOM vanilla JavaScript sekarang, kamu sedang membangun fondasi untuk belajar framework tersebut di masa depan!

✅ Kesimpulan

Kamu Sekarang Punya Kunci untuk Mengendalikan HTML!

Di artikel ini kita sudah membahas banyak hal seru:

DOM adalah jembatan antara JavaScript dan struktur HTML
Cara memilih elemen dengan querySelector dan getElementById
Mengubah teks dengan textContent dan innerHTML
Mengubah style langsung via properti .style
Menambah dan menghapus elemen HTML secara dinamis
Manipulasi class dan atribut untuk kontrol tampilan

Dengan menguasai DOM JavaScript manipulasi HTML, kamu sudah selangkah lebih dekat membuat halaman web yang benar-benar interaktif. Selanjutnya, kita akan belajar bagaimana membuat halaman merespons aksi pengguna seperti klik, ketikan, dan hover — di Artikel 7!

📚 Lihat Semua Seri 💬 Tulis komentarmu di bawah!

🏷️ Tag Topik

#JavaScript #DOM #ManipulasiHTML #WebDevelopment #BelajarCoding #ZeroToZorro

📗