DOM traversal: parent, children, sibling

Navigasi pohon DOM: parentElement, children, nextElementSibling.

Pahami konsepnya

DOM adalah pohon — setelah memilih satu elemen, kamu bisa berjalan ke atas, bawah, dan samping. parentElement memberi induk; children memberi koleksi anak (HTMLCollection, bukan array); firstElementChild dan lastElementChild memberi anak pertama/terakhir.

Berjalan horizontal: nextElementSibling dan previousElementSibling memberi tetangga kanan-kiri pada level yang sama. closest("selector") naik ke atas mencari induk TERDEKAT yang cocok dengan selector — sangat berguna untuk mencari container dari tombol yang diklik.

Perbedaan penting: children hanya element node (disarankan); childNodes termasuk text node (spasi dan newline antar tag). Gunakan versi "Element" untuk navigasi yang bersih.

Coba contoh kode

<!doctype html>
<html>
<body>
  <div class="kartu">
    <h3>Judul Kartu</h3>
    <p>Isi kartu...</p>
    <button class="hapus">Hapus</button>
  </div>

  <script>
    const btn = document.querySelector(".hapus");

    // naik ke kartu induk
    const kartu = btn.closest(".kartu");
    console.log(kartu.querySelector("h3").textContent);  // Judul Kartu

    // navigasi
    console.log(kartu.parentElement.tagName);   // BODY
    console.log(kartu.children.length);         // 3 (h3, p, button)
    console.log(btn.previousElementSibling.textContent);  // Isi kartu...

    // hapus kartu dari tombol di dalamnya
    btn.addEventListener("click", () => kartu.remove());
  </script>
</body>
</html>

closest(".kartu") naik dari tombol ke div induk berkelas kartu. previousElementSibling memberi p sebelum tombol. Tombol menghapus seluruh kartu lewat kartu.remove().

Latihan singkat

Uji: fungsi cariInduk(node, kelas) — naik parentElement sampai ketemu kelas.