menengahdommanipulasiMenengah3 mnt baca

Manipulasi DOM

Mengubah halaman secara dinamis: teks, HTML, style, class, atribut, dan membuat elemen baru.

Mengubah halaman tanpa reload

Setelah elemen terpilih, kamu bisa mengubah isinya, tampilannya, bahkan strukturnya. Semua terjadi langsung tanpa reload halaman.

Mengubah teks dan HTML

javascript

let judul = document.querySelector("#judul");

judul.textContent = "Judul baru"; // ubah teks saja
judul.innerHTML = "Judul <em>miring</em>"; // ubah + render HTML

textContent memperlakukan isi sebagai teks polos, innerHTML me-render tag HTML di dalamnya.

Mengubah style dan class

javascript

let kotak = document.querySelector(".kotak");

kotak.style.backgroundColor = "tomato"; // inline style
kotak.style.fontSize = "20px"; // camelCase, bukan font-size

kotak.classList.add("aktif");     // tambah class
kotak.classList.remove("aktif");  // hapus class
kotak.classList.toggle("aktif");  // saklar: ada jadi hilang, hilang jadi ada

Untuk perubahan tampilan, classList lebih baik daripada style langsung karena styling tetap di CSS, JavaScript hanya mengatur state.

Atribut

javascript

let img = document.querySelector("img");

img.setAttribute("src", "foto-baru.jpg");
console.log(img.getAttribute("src"));
img.removeAttribute("alt");

Membuat dan menambah elemen

javascript

let ul = document.querySelector("ul");
let li = document.createElement("li");
li.textContent = "Item baru";
ul.appendChild(li); // tambah di akhir

// atau dengan prepend untuk di awal
ul.prepend(li);

Untuk menghapus: elemen.remove().

Catatan teknis: Jangan memasukkan input pengguna mentah ke innerHTML karena membuka celah XSS (script jahat bisa dijalankan). Untuk teks dari pengguna, selalu pakai textContent yang otomatis meng-escape HTML. innerHTML hanya untuk HTML yang kamu tulis sendiri dan percaya.

Studi kasus: tambah item ke list

Rangkai semua teknik manipulasi dalam satu contoh utuh:

javascript

let ul = document.querySelector("#daftar");
let input = document.querySelector("#input-item");

function tambahItem() {
  let teks = input.value.trim();
  if (!teks) return; // abaikan input kosong

  let li = document.createElement("li");
  li.textContent = teks; // textContent, bukan innerHTML (aman!)

  let tombol = document.createElement("button");
  tombol.textContent = "Hapus";
  tombol.classList.add("btn-hapus");
  tombol.addEventListener("click", () => li.remove());

  li.appendChild(tombol);
  ul.appendChild(li);
  input.value = ""; // kosongkan input
  input.focus();    // fokus lagi untuk input berikutnya
}

Contoh ini menggabungkan createElement, textContent, classList, addEventListener, dan appendChild. Ini kerangka dasar aplikasi todo list yang akan disempurnakan dengan event delegasi nanti.

insertAdjacentHTML untuk posisi presisi

Selain appendChild, ada cara cepat menyisipkan HTML di posisi tepat:

javascript

let list = document.querySelector("ul");
// beforebegin, afterbegin, beforeend, afterend
list.insertAdjacentHTML("beforeend", "<li>Item akhir</li>");
list.insertAdjacentHTML("afterbegin", "<li>Item awal</li>");

Empat posisi: sebelum elemen, di awal dalam elemen, di akhir dalam elemen, setelah elemen. Lebih fleksibel daripada append/prepend saja. Ingat aturan XSS tetap berlaku: jangan masukkan input pengguna mentah ke sini.

Kesimpulan

Alur kerja DOM: pilih elemen, ubah isi/tampilan/atributnya. Kombinasikan dengan event (modul berikutnya) dan kamu bisa membuat halaman yang benar-benar interaktif.