JavaScript DOM Manipulation: Cara Berinteraksi dengan Elemen HTML

DOM (Document Object Model) adalah representasi halaman HTML sebagai pohon objek JavaScript. Ketika browser memuat halaman web, ia membuat DOM — dan JavaScript bisa membaca, mengubah, menambah, atau menghapus elemen DOM secara dinamis tanpa perlu reload halaman. Inilah yang membuat halaman web menjadi interaktif.

Struktur DOM

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Saya</title>
  </head>
  <body>
    <h1 id="judul">Selamat Datang</h1>
    <p class="teks">Ini paragraf pertama.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>

document
  └── html
        ├── head
        │     └── title
        └── body
              ├── h1 #judul
              ├── p .teks
              └── ul
                    ├── li
                    └── li

Memilih Elemen (Selector)

// querySelector — pilih elemen pertama yang cocok (CSS selector)
const judul = document.querySelector("#judul");
const teks = document.querySelector(".teks");
const btn = document.querySelector("button");
const input = document.querySelector("input[type='email']");

// querySelectorAll — pilih SEMUA elemen yang cocok (NodeList)
const semuaLi = document.querySelectorAll("ul li");
const semuaCard = document.querySelectorAll(".card");

// Cara lama (masih berlaku)
document.getElementById("judul");
document.getElementsByClassName("teks");  // HTMLCollection
document.getElementsByTagName("p");       // HTMLCollection

// Iterasi querySelectorAll
semuaLi.forEach(li => {
  console.log(li.textContent);
});

Membaca dan Mengubah Konten

const el = document.querySelector("#judul");

// Membaca konten
console.log(el.textContent);   // teks murni (tanpa tag HTML)
console.log(el.innerHTML);      // termasuk tag HTML di dalamnya
console.log(el.outerHTML);      // termasuk tag elemennya sendiri

// Mengubah konten
el.textContent = "Judul Baru";
el.innerHTML = "Judul <strong>Baru</strong>";  // hati-hati XSS!

// Cara aman menambah konten (tanpa risiko XSS)
const p = document.querySelector("p");
p.textContent = "<script>alert('xss')</script>";  // ditampilkan literal, aman

Mengubah Style dan Class

const box = document.querySelector(".box");

// Mengubah style langsung (inline style)
box.style.backgroundColor = "red";
box.style.fontSize = "20px";
box.style.display = "none";      // sembunyikan
box.style.display = "block";     // tampilkan kembali

// Lebih baik: manipulasi via class
box.classList.add("aktif");          // tambah class
box.classList.remove("aktif");       // hapus class
box.classList.toggle("aktif");       // tambah jika tidak ada, hapus jika ada
box.classList.contains("aktif");     // cek apakah punya class

// Set class sekaligus (mengganti semua class)
box.className = "card aktif highlighted";

Mengubah Atribut

const img = document.querySelector("img");
const link = document.querySelector("a");

// Baca atribut
console.log(img.getAttribute("src"));
console.log(img.alt);  // properti HTML standar bisa diakses langsung

// Ubah atribut
img.setAttribute("src", "/assets/images/baru.jpg");
img.setAttribute("alt", "Deskripsi gambar baru");
link.href = "https://kiki.my.id";

// Hapus atribut
img.removeAttribute("alt");

// Data attribute
const card = document.querySelector("[data-id]");
console.log(card.dataset.id);       // nilai data-id
console.log(card.dataset.kategori); // nilai data-kategori
card.dataset.status = "aktif";      // set data-status="aktif"

Membuat dan Menambah Elemen Baru

// Buat elemen baru
const li = document.createElement("li");
li.textContent = "Item Baru";
li.classList.add("item-list");

// Tambahkan ke DOM
const ul = document.querySelector("ul");
ul.appendChild(li);                    // tambah di akhir
ul.prepend(li);                        // tambah di awal
ul.insertBefore(li, ul.children[1]);   // sisipkan sebelum elemen indeks 1

// insertAdjacentHTML — cara cepat
ul.insertAdjacentHTML("beforeend", "<li class='item-list'>Item dari HTML</li>");
// Posisi: "beforebegin", "afterbegin", "beforeend", "afterend"

// Cara modern: append dengan teks atau node
ul.append("teks biasa", li, document.createElement("li"));

Menghapus Elemen

const el = document.querySelector(".hapus-saya");

// Cara modern
el.remove();

// Cara lama (via parent)
el.parentNode.removeChild(el);

// Hapus semua child
const container = document.querySelector("#container");
container.innerHTML = "";  // cepat tapi tidak optimal
while (container.firstChild) {
  container.removeChild(container.firstChild);  // lebih bersih
}

Traversal DOM — Navigasi Antar Elemen

const item = document.querySelector(".item");

// Naik ke parent
item.parentElement;
item.closest(".container");  // cari ancestor terdekat yang cocok selector

// Turun ke children
item.children;               // semua child elements (HTMLCollection)
item.firstElementChild;      // child pertama
item.lastElementChild;       // child terakhir
item.childNodes;             // semua child nodes (termasuk teks dan komentar)

// Saudara (sibling)
item.nextElementSibling;     // elemen berikutnya
item.previousElementSibling; // elemen sebelumnya

Contoh Praktis: Dynamic List

const form = document.querySelector("#form-tambah");
const input = document.querySelector("#input-item");
const daftar = document.querySelector("#daftar");

form.addEventListener("submit", function(e) {
  e.preventDefault();  // cegah reload halaman

  const teks = input.value.trim();
  if (!teks) return;

  const li = document.createElement("li");
  li.textContent = teks;

  // Tombol hapus
  const btnHapus = document.createElement("button");
  btnHapus.textContent = "×";
  btnHapus.addEventListener("click", () => li.remove());
  li.appendChild(btnHapus);

  daftar.appendChild(li);
  input.value = "";     // kosongkan input
  input.focus();        // fokus kembali ke input
});

Kesimpulan

Manipulasi DOM adalah keterampilan inti untuk membangun halaman web yang interaktif. Dengan querySelector, createElement, manipulasi class dan atribut, kamu bisa membuat halaman yang responsif terhadap aksi pengguna.

Di artikel berikutnya, kita bahas Event Handling — cara merespons klik, input, scroll, dan semua interaksi pengguna dengan JavaScript.