DOM Traversing di jQuery adalah teknik “menjelajahi” struktur HTML untuk memilih elemen berdasarkan posisinya relatif terhadap elemen lain — naik ke parent, turun ke child, atau menyamping ke sibling — tanpa perlu menulis selector CSS yang rumit.

Method Dasar Traversing

1. parent() dan parents() — Naik ke Elemen Induk

<div class="container">
  <p><span id="target">Teks</span></p>
</div>

<script>
$("#target").parent();        // pilih <p> (induk langsung)
$("#target").parents();       // pilih semua leluhur: p, div, body, html
$("#target").closest("div");  // pilih leluhur terdekat yang cocok selector
</script>

2. children() — Turun ke Elemen Anak Langsung

$(".container").children();      // semua anak langsung (bukan cucu)
$(".container").children("p");   // hanya anak langsung berupa <p>

3. find() — Cari ke Semua Level Turunan

$(".container").find("span");  // cari <span> di semua level turunan, tidak cuma anak langsung

Perbedaan utama children() vs find(): children() hanya melihat satu level ke bawah, find() menjelajahi seluruh turunan tanpa batas kedalaman.

4. siblings(), next(), dan prev() — Elemen Sejajar

<ul>
  <li>Item 1</li>
  <li id="current">Item 2</li>
  <li>Item 3</li>
</ul>

<script>
$("#current").siblings();  // semua <li> lain (Item 1 dan Item 3)
$("#current").next();      // elemen setelahnya (Item 3)
$("#current").prev();      // elemen sebelumnya (Item 1)
</script>

5. eq() — Memilih Berdasarkan Index

$("li").eq(1);   // pilih elemen li kedua (index dimulai dari 0)
$("li").first(); // pilih elemen li pertama
$("li").last();  // pilih elemen li terakhir

Contoh Praktis: Highlight Item Kedua dari List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
$(document).ready(function() {
    $("li").eq(1).css("background-color", "yellow");
});
</script>

Belajar JavaScript dan manipulasi DOM dari dasar bisa diikuti di Kursus JavaScript Edusoft Center.

Direview oleh Komarudin Syarif — Trainer Edusoft Center.
Terakhir diperbarui: 11 Agustus 2026.