Pengantar DOM.

DOM (Document Object Model) adalah representasi halaman HTML dalam bentuk struktur objek yang bisa diakses dan diubah oleh JavaScript. Saat browser memuat HTML, ia membangun DOM sebagai “pohon” elemen yang bisa dimanipulasi secara dinamis.

HTML vs DOM

HTML adalah teks statis yang dikirim server, sedangkan DOM adalah representasi hidup dari halaman tersebut di dalam memori browser — bisa berubah kapan saja tanpa perlu memuat ulang halaman.

<p id="pesan">Halo</p>

document.getElementById("pesan").textContent = "Halo, Dunia!";
// Teks di layar berubah seketika, tanpa reload halaman

Memilih Elemen

document.getElementById("judul");
document.querySelector(".kartu");        // elemen pertama yang cocok
document.querySelectorAll(".kartu");     // semua elemen yang cocok, dikembalikan sebagai NodeList

querySelector dan querySelectorAll lebih fleksibel karena menerima selector CSS apapun, termasuk kombinasi class, id, dan atribut.

Mengubah Konten Elemen

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

judul.textContent = "Judul Baru";      // mengganti teks polos
judul.innerHTML = "<strong>Tebal</strong>"; // mengganti isi termasuk tag HTML

innerHTML perlu dipakai hati-hati, terutama jika isinya berasal dari input pengguna, karena berpotensi membuka celah serangan XSS jika tidak disaring dengan benar.

Mengubah Atribut dan Style

const gambar = document.querySelector("img");

gambar.setAttribute("src", "foto-baru.jpg");
gambar.style.borderRadius = "8px";
gambar.classList.add("aktif");
gambar.classList.remove("tersembunyi");
gambar.classList.toggle("terpilih");

Membuat dan Menambah Elemen Baru

const item = document.createElement("li");
item.textContent = "Tugas baru";

document.querySelector("#daftarTugas").appendChild(item);

Menghapus Elemen

const elemen = document.querySelector("#peringatan");
elemen.remove();

Traversal: Berpindah Antar Elemen Terkait

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

item.parentElement;       // elemen induk
item.children;             // elemen anak
item.nextElementSibling;   // elemen tetangga berikutnya

Kesimpulan

DOM adalah jembatan antara HTML statis dan interaktivitas yang dijalankan JavaScript, memungkinkan halaman berubah secara real-time tanpa reload. Menguasai cara memilih elemen (querySelector), mengubah isinya, dan menangani perubahan struktur (createElement, appendChild, remove) adalah dasar dari hampir semua interaktivitas web sebelum beralih ke framework seperti React.