Traversing DOM: parentNode, children, nextElementSibling, previousElementSibling gambar

Setelah Anda mahir mengambil elemen dengan ID atau Class, terkadang Anda perlu menelusuri elemen lain yang berada di sekitarnya tanpa harus membuat selector baru. Inilah yang disebut dengan DOM Traversing (Menjelajahi DOM).

Bayangkan DOM sebagai sebuah silsilah keluarga. Anda bisa bergerak ke atas (orang tua), ke bawah (anak), atau ke samping (saudara).

1. Bergerak ke Atas: parentNode atau parentElement

Properti ini digunakan untuk mendapatkan elemen pembungkus atau induk dari elemen yang sedang Anda pilih.

• Kegunaan: Menghapus seluruh baris tabel saat tombol "Hapus" di dalam sel diklik.

• Contoh:

  JavaScript

  const tombol = document.querySelector('.btn-close');
  const parent = tombol.parentElement; // Mendapatkan div pembungkus tombol
  parent.style.display = 'none'; 

2. Bergerak ke Bawah: children

Properti ini mengembalikan daftar (HTMLCollection) dari semua elemen anak yang berada langsung di dalam elemen tersebut.

• Kegunaan: Mengubah gaya semua item di dalam sebuah daftar (<ul>).

• Contoh:

 const daftar = document.querySelector('ul'); const semuaAnak = daftar.children; // Mendapatkan semua <li> console.log(semuaAnak[0]); // Mengambil anak pertama ``` --- ## 3. Bergerak ke Samping: Saudara Kandung
Dalam DOM, elemen yang berada di level yang sama disebut *Siblings*. ### A. nextElementSibling
Digunakan untuk mengambil elemen setelah elemen yang dipilih (di bawahnya dalam kode HTML).
```javascript
const item1 = document.querySelector('#item-1');
const item2 = item1.nextElementSibling; // Mengambil elemen setelahnya

B. previousElementSibling

Digunakan untuk mengambil elemen sebelum elemen yang dipilih (di atasnya dalam kode HTML).

const item2 = document.querySelector('#item-2');
const item1 = item2.previousElementSibling; // Mengambil elemen sebelumnya

Perbandingan Cepat: Element vs Node

Anda mungkin akan menemukan properti mirip seperti childNodes atau nextSibling. Perbedaannya sangat penting:

• Properti "Element" (seperti children, nextElementSibling): Hanya menghitung tag HTML. Ini yang paling sering kita gunakan.

• Properti "Node" (seperti childNodes, nextSibling): Menghitung segalanya, termasuk spasi kosong (whitespace) dan komentar sebagai bagian dari pohon DOM.

Saran: Selalu gunakan varian Element agar kode Anda lebih stabil dan tidak terganggu oleh spasi atau baris baru di file HTML Anda.

Tabel Ringkasan Traversing

Tutorial Praktis: Manipulasi Baris Tabel

Misalkan Anda ingin mengubah warna sel di sebelah tombol yang diklik:

const semuaTombol = document.querySelectorAll('.edit-btn'); semuaTombol.forEach(btn => { btn.addEventListener('click', (e) => { // 1. Naik ke sel pembungkus tombol (td) // 2. Geser ke saudara sebelumnya (td berisi nama) const namaKolom = e.target.parentElement.previousElementSibling; namaKolom.style.fontWeight = 'bold'; });
});

Dengan memahami navigasi ini, Anda tidak perlu lagi memberikan ID pada setiap elemen HTML. Cukup tangkap satu elemen, dan Anda bisa menjangkau seluruh struktur di sekitarnya!