DOM (Document Object Model) adalah cara JS berbicara dengan HTML. Tapi memanipulasi DOM itu lambat. Mengetahui cara melakukannya secara efisien adalah keterampilan senior.
Taman Bermain Interaktif
<div id="parent" style="padding: 20px; background: #eee;">
Div Induk
<button id="child">Klik Saya (Anak)</button>
</div>
<p id="log">Log:</p>Event Bubbling (Menara Sampanye)
Saat Anda mengklik tombol di dalam div, Anda sebenarnya mengklik keduanya.
Event "Bubbles Up" (Menggelembung ke Atas) seperti gelembung di air: Tombol → Div → Body → HTML.
Pola Pro (Event Delegation): Daripada menambahkan 100 listener ke 100 item daftar, tambahkan 1 listener ke daftar induk (UL). Ini menangkap semua klik dari anak-anaknya.
Memilih Elemen
javascript
// Modern & Fleksibel
const btn = document.querySelector(".submit-btn");
const allItems = document.querySelectorAll("li");
// Cara Lama (Lebih cepat, tapi spesifik)
const header = document.getElementById("header");Memodifikasi DOM
javascript
const box = document.createElement("div");
box.classList.add("alert-box");
box.textContent = "Error Disimpan!";
document.body.appendChild(box);