DOM Traversing: Berpindah antar Elemen

Bergerak tanpa selector baru

Kadang kamu sudah memegang satu elemen (misalnya tombol yang diklik) dan butuh elemen di sekitarnya. Daripada querySelector lagi, bergeraklah lewat hubungan keluarga DOM. Ini disebut traversing.

Ke atas: parent

let tombol = document.querySelector("button");
let formnya = tombol.parentElement; // elemen pembungkus langsung
console.log(formnya.tagName);

Untuk mencari leluhur yang cocok dengan selector tertentu, pakai closest (bergerak ke atas sampai ketemu):

// <div class="card"><div><button>Hapus</button></div></div>
let tombol = document.querySelector("button");
let kartu = tombol.closest(".card"); // div.card terdekat ke atas

closest sangat berguna di event handler: dari tombol yang diklik, temukan kartu pembungkusnya.

Ke bawah: children

let ul = document.querySelector("ul");
console.log(ul.children.length); // jumlah elemen anak
console.log(ul.firstElementChild); // anak pertama
console.log(ul.lastElementChild);  // anak terakhir

Gunakan versi Element (children, firstElementChild) bukan versi Node (childNodes) agar node teks seperti spasi dan baris baru tidak ikut terhitung.

Ke samping: sibling

let item = document.querySelector(".aktif");
console.log(item.nextElementSibling);     // saudara berikutnya
console.log(item.previousElementSibling); // saudara sebelumnya

Contoh nyata: hapus baris tabel

document.querySelectorAll(".hapus").forEach(tombol => {
  tombol.addEventListener("click", () => {
    tombol.closest("tr").remove(); // hapus baris tempat tombol berada
  });
});

Tanpa traversing, kamu harus memberi ID unik ke setiap baris. Dengan closest, satu pola bekerja untuk semua baris.

Catatan teknis: Bedakan parentElement dengan parentNode. parentNode bisa mengembalikan node non-elemen (seperti document), sedangkan parentElement selalu elemen atau null. Untuk traversing antar elemen HTML, versi Element lebih aman.

Studi kasus: accordion sederhana

Traversing cocok untuk komponen yang strukturnya berulang seperti accordion:

document.querySelectorAll(".acc-judul").forEach(judul => {
  judul.addEventListener("click", () => {
    let isi = judul.nextElementSibling; // konten tepat setelah judul
    let sedangBuka = isi.classList.contains("buka");

    // tutup semua dulu
    document.querySelectorAll(".acc-isi").forEach(el =>
      el.classList.remove("buka")
    );

    // buka yang diklik (kecuali memang sedang buka)
    if (!sedangBuka) isi.classList.add("buka");
  });
});

nextElementSibling menemukan konten tanpa butuh ID unik per section. Pola "tutup semua, buka satu" memastikan hanya satu panel terbuka dalam satu waktu, perilaku standar accordion.

children vs childNodes

Hati-hati memilih properti anak, keduanya beda:

let ul = document.querySelector("ul");
console.log(ul.children.length);   // hanya elemen <li>
console.log(ul.childNodes.length);  // termasuk teks spasi/baris baru!

childNodes menghitung semua node termasuk teks kosong dari indentasi HTML, sehingga jumlahnya sering mengejutkan. Untuk traversing antar elemen, selalu pakai versi Element: children, firstElementChild, nextElementSibling. Versi Node hanya untuk kasus khusus pengolahan teks.

Kesimpulan

Traversing membuat kode lebih tahan perubahan struktur HTML karena bergerak relatif dari elemen yang sudah dipegang. Kuasai closest, parentElement, children, dan sibling.