DOM (Document Object Model)
Representasi struktur HTML sebagai tree of objects yang bisa dimanipulasi JavaScript.
DOM adalah representasi tree-like dari struktur HTML dokumen di memory. Setiap elemen HTML (tag), atribut, dan text node menjadi node dalam tree. DOM adalah interface programming untuk web page — JavaScript bisa mengakses dan memanipulasi DOM untuk mengubah konten, struktur, dan style halaman secara dinamis. Virtual DOM (konsep React) adalah representasi DOM di memory JavaScript. Saat state berubah, React membandingkan Virtual DOM baru dengan yang lama (diffing), lalu hanya mengupdate DOM nyata yang berubah (reconciliation) — ini jauh lebih efisien daripada manipulasi DOM langsung.
Contoh Kode
// DOM manipulation vanilla JS
const element = document.getElementById('app');
element.textContent = 'Hello World';
element.classList.add('active');
element.style.color = 'red';
// Membuat elemen baru
const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);