Bab 12: Traversing DOM jQuery – Menavigasi dan Memilih Elemen dengan Mudah

Bab 12: Traversing DOM jQuery – Menavigasi dan Memilih Elemen dengan Mudah

Setelah mempelajari Manipulasi Class dan Attribute, langkah selanjutnya adalah memahami Traversing DOM jQuery. Traversing DOM memungkinkan Anda menavigasi elemen HTML secara hierarki, seperti memilih parent, child, sibling, atau elemen tertentu berdasarkan posisi.

Dengan kemampuan ini, Anda bisa melakukan manipulasi lebih spesifik tanpa harus menandai setiap elemen dengan ID atau class.

1. Memilih Child Elements dengan .children()

Method .children() digunakan untuk mengambil elemen anak langsung dari suatu elemen.

Contoh:

$("#list").children().css("color", "red");

Artinya: semua child langsung dari elemen dengan id list akan berubah warna menjadi merah.

2. Memilih Parent Elements dengan .parent() dan .parents()

  • .parent() → mengambil parent langsung
  • .parents() → mengambil semua parent hingga root

Contoh:

$("#item").parent().css("background-color", "yellow");
$("#item").parents("div").css("border", "2px solid red");

3. Memilih Sibling dengan .siblings() dan .next(), .prev()

  • .siblings() → memilih semua sibling
  • .next() → memilih sibling berikutnya
  • .prev() → memilih sibling sebelumnya

Contoh:

$("#item2").siblings().css("color", "blue");
$("#item1").next().css("font-weight", "bold");
$("#item3").prev().css("text-decoration", "underline");

4. Memilih Elemen Berdasarkan Posisi dengan .first(), .last(), .eq()

  • .first() → elemen pertama
  • .last() → elemen terakhir
  • .eq(index) → elemen pada posisi tertentu (index dimulai dari 0)

Contoh:

$("li").first().css("color", "green");
$("li").last().css("color", "red");
$("li").eq(1).css("font-size", "20px");

5. Memilih Elemen Terdekat dengan .closest()

Method .closest() mencari ancestor terdekat yang sesuai selector.

Contoh:

$("#item").closest("ul").css("border", "2px dashed black");

Artinya: mencari parent <ul> terdekat dari elemen dengan id item.

6. Contoh Lengkap Traversing DOM jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Traversing DOM jQuery</title>
  <style>
    li { margin: 5px; }
  </style>
</head>
<body>

<ul id="list">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // Mengubah semua child li
  $("#list").children().css("color", "red");

  // Mengubah parent ul
  $("#item2").parent().css("background-color", "lightgray");

  // Mengubah sibling
  $("#item1").next().css("font-weight", "bold");
  $("#item3").prev().css("text-decoration", "underline");

  // Posisi tertentu
  $("li").first().css("color", "green");
  $("li").last().css("color", "blue");
  $("li").eq(1).css("font-size", "20px");

  // Closest ancestor
  $("#item3").closest("ul").css("border", "2px dashed black");
</script>

</body>
</html>

7. Tips dan Kesalahan Umum

  • ❌ Salah penggunaan selector saat menavigasi parent atau sibling
  • ❌ Menggunakan .children() saat ingin mengambil semua descendant
  • ❌ Lupa bahwa .eq() dimulai dari index 0
  • ❌ Tidak menempatkan jQuery di dalam $(document).ready()

Kesimpulan

Pada Bab 12: Traversing DOM jQuery, Anda telah mempelajari berbagai metode untuk menavigasi elemen HTML, termasuk parent, child, sibling, posisi tertentu, dan ancestor terdekat. Traversing DOM membuat manipulasi elemen menjadi lebih fleksibel dan efisien, terutama ketika bekerja dengan struktur HTML yang kompleks.

Related Posts