BAB 11 — Menguasai DOM: Panduan Lengkap Manipulasi Halaman Web Dinamis

BAB 11 — Menguasai DOM: Panduan Lengkap Manipulasi Halaman Web Dinamis

DOM (Document Object Model) adalah representasi halaman HTML dalam bentuk objek pohon yang memungkinkan JavaScript untuk membaca, mengubah, menambahkan, atau menghapus elemen secara dinamis.

Menguasai DOM adalah dasar penting untuk membangun web interaktif, responsif, dan modern.

1. Struktur DOM: Memahami Halaman Sebagai Tree

DOM memetakan halaman HTML menjadi struktur pohon hierarki, sehingga setiap elemen dapat diakses sebagai node.

  • Root (Akar) → <html>
  • Parent (Induk) → <body>, <div>
  • Child (Anak) → <p>, <span>, <ul>
  • Sibling (Saudara) → elemen dengan parent yang sama

Contoh HTML:

<html>
  <body>
    <div id="container">
      <p>Halo Dunia</p>
      <p>Belajar DOM</p>
    </div>
  </body>
</html>

Struktur pohon:

html
└─ body
   └─ div#container
      ├─ p "Halo Dunia"
      └─ p "Belajar DOM"

Tips dan insight:

  • DOM bersifat dinamis; setiap perubahan di JavaScript akan memicu reflow & repaint.
  • Mengakses elemen terlalu sering di loop bisa menurunkan performa. Gunakan variabel penyimpanan elemen atau DocumentFragment untuk batch updates.

2. Selector: Cara Menemukan Elemen

Selector adalah cara untuk mengidentifikasi elemen DOM yang ingin dimanipulasi.

2.1 getElementById

const container = document.getElementById('container');
  • Mengembalikan satu elemen, cepat, ideal untuk elemen unik.

2.2 getElementsByClassName & getElementsByTagName

const paragraphs = document.getElementsByTagName('p');
const boxes = document.getElementsByClassName('box');
  • Mengembalikan HTMLCollection, bisa di-loop.

2.3 querySelector & querySelectorAll

const firstParagraph = document.querySelector('div p');
const allParagraphs = document.querySelectorAll('div p');
  • Mendukung CSS selector lengkap.
  • querySelectorAll → NodeList, bisa pakai forEach.

Tips:

  • Gunakan getElementById untuk akses cepat.
  • Gunakan querySelector untuk fleksibilitas selector modern.

3. Manipulasi Konten dan Struktur Elemen

3.1 Mengubah Teks & HTML

const p = document.querySelector('p');
p.textContent = "Halo JavaScript!";  // hanya teks
p.innerHTML = "<b>Halo Bold</b>";    // bisa HTML

3.2 Mengubah Input Value

document.querySelector('input').value = "Isi otomatis";

3.3 Menambahkan & Menghapus Elemen

const newDiv = document.createElement('div');
newDiv.textContent = "Elemen Baru";
document.body.appendChild(newDiv);  // menambahkan
newDiv.remove();                     // menghapus

Tips performa:

  • Gunakan DocumentFragment untuk menambahkan banyak elemen sekaligus agar reflow terjadi sekali.

4. Manipulasi Class & Style

4.1 classList

box.classList.add('active');
box.classList.remove('hidden');
box.classList.toggle('highlight');

4.2 style

box.style.backgroundColor = 'blue';
box.style.width = '200px';

Praktik terbaik:

  • Gunakan class untuk animasi dan styling, bukan style inline.
  • Inline style menurunkan performa karena browser harus menghitung ulang rendering.

5. Navigasi DOM: Parent, Child, Sibling

  • parentNode → mengakses parent
  • children → mengakses anak langsung
  • firstElementChild, lastElementChild → anak pertama/terakhir
  • nextElementSibling, previousElementSibling → sibling

Contoh:

const firstChild = container.firstElementChild;
const nextSibling = firstChild.nextElementSibling;
console.log(nextSibling.textContent); // "Belajar DOM"

Insight:

  • Navigasi DOM efisien untuk manipulasi struktur halaman kompleks tanpa query ulang.

6. Event Dasar pada DOM

Meskipun event detail akan dibahas di BAB 12, memahami event dasar DOM penting:

const button = document.querySelector('button');
button.addEventListener('click', () => {
    alert("Tombol diklik!");
});

Tips:

  • Gunakan addEventListener daripada onclick di HTML.
  • Dapat attach beberapa listener untuk elemen sama.

7. Manipulasi DOM Dinamis: Contoh Kasus Nyata

  1. Membuat daftar dinamis
const ul = document.createElement('ul');
for(let i=1; i<=5; i++){
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    ul.appendChild(li);
}
document.body.appendChild(ul);
  1. Menyembunyikan/menampilkan elemen
const box = document.querySelector('.box');
box.classList.toggle('hidden'); // sembunyi/lihat
  1. Form feedback real-time
const input = document.querySelector('input');
input.addEventListener('input', e => {
    console.log("User mengetik:", e.target.value);
});

8. Tips Performa & Praktik Terbaik

  • Minimalkan akses DOM berulang dengan menyimpan referensi elemen.
  • Gunakan DocumentFragment untuk menambahkan banyak elemen sekaligus.
  • Gunakan class untuk styling dan animasi, bukan inline style.
  • Hindari innerHTML berulang untuk update besar; gunakan textContent atau virtual DOM.
  • Bersihkan event listener saat elemen dihapus untuk mencegah memory leak.

Kesimpulan

  • DOM adalah jantung interaktivitas web.
  • Selector yang tepat, manipulasi elemen, class, style, dan event listener adalah dasar pengembangan front-end.
  • Praktik performa seperti caching elemen, batch updates, dan pengelolaan class akan membuat aplikasi lebih cepat dan maintainable.
  • Menguasai DOM adalah prasyarat untuk framework modern seperti React, Vue, atau Angular.

Related Posts