1. Apa itu Document Object Model (DOM)?
**DOM (Document Object Model)** adalah antarmuka pemrograman berorientasi objek yang mewakili dokumen HTML sebagai pohon simpul (*node tree*). Melalui JavaScript, kita dapat membaca, mengubah, menambah, atau menghapus elemen dan konten halaman secara dinamis saat runtime.
2. Seleksi & Modifikasi Elemen Modern
example.js
javascript
| 1 | // 1. Seleksi elemen dengan CSS selector |
| 2 | const banner = document.querySelector('.hero-banner'); |
| 3 | const buttons = document.querySelectorAll('button.btn-primary'); |
| 4 | |
| 5 | // 2. Manipulasi class & atribut |
| 6 | banner.classList.add('active', 'border-black'); |
| 7 | banner.classList.toggle('hidden'); |
| 8 | banner.setAttribute('aria-expanded', 'true'); |
| 9 | |
| 10 | // 3. Mengubah teks dan HTML |
| 11 | banner.textContent = 'Materi Berhasil Dimuat!'; |
3. Optimasi Performa: Mencegah Layout Reflow dengan DocumentFragment
Menambahkan elemen langsung ke DOM secara berulang di dalam loop menyebabkan **Layout Thrashing (Reflow & Repaint)** yang membuat antarmuka tersendat. Gunakan `DocumentFragment` sebagai wadah memori virtual di luar DOM, lalu masukkan sekaligus dalam satu kali operasi.
example.js
javascript
| 1 | const listContainer = document.querySelector('#item-list'); |
| 2 | const fragment = document.createDocumentFragment(); |
| 3 | |
| 4 | const items = ['HTML', 'CSS', 'JavaScript', 'TypeScript']; |
| 5 | items.forEach(text => { |
| 6 | const li = document.createElement('li'); |
| 7 | li.textContent = text; |
| 8 | li.className = 'p-2 border-2 border-black mb-2'; |
| 9 | fragment.appendChild(li); |
| 10 | }); |
| 11 | |
| 12 | // Hanya memicu 1 kali reflow DOM: |
| 13 | listContainer.appendChild(fragment); |