DOM: Mengubah Halaman

DOM: halaman sebagai pohon

Browser membaca HTML dan mengubahnya menjadi pohon objek bernama DOM (Document Object Model). JavaScript bisa menjelajahi pohon ini lalu mengubah isinya, dan perubahan langsung terlihat di layar.

1. Ambil elemen

const judul = document.querySelector("#judul");   // berdasarkan id
const item  = document.querySelector(".item");    // berdasarkan class
const semua = document.querySelectorAll("li");    // semua yang cocok

2. Ubah isi dan tampilan

judul.textContent = "Judul Baru";
judul.classList.add("aktif");
judul.style.color = "green";

3. Buat dan tambah elemen

const li = document.createElement("li");
li.textContent = "Item baru";
document.querySelector("ul").appendChild(li);

Pada latihan di bawah, halaman contoh sudah tersedia di panel Preview, sehingga kamu bisa melihat perubahan langsung.