Halo teman-teman semuanya, di artikel kedelapan ini, kita akan belajar tentang Traversal DOM di jQuery. Traversal DOM berarti kita menjelajahi struktur HTML (DOM tree) untuk menemukan elemen-elemen lain yang berhubungan, seperti parent, child, sibling, dan sebagainya.
Fitur ini sangat berguna saat kita ingin menargetkan elemen tertentu berdasarkan posisinya dalam struktur HTML, tanpa harus memberikan ID atau class secara manual pada setiap elemen.
1. Menelusuri Ke Atas (Parent)
-
.parent()
Digunakan untuk mengambil elemen induk langsung dari suatu elemen.
$("#paragraf").parent().css("border", "1px solid red");
-
.parents()
Mengambil semua elemen induk (hingga html) dari suatu elemen.
$("#paragraf").parents().css("background", "lightgray");
2. Menelusuri Ke Bawah (Children)
-
.children()
Mengambil elemen anak langsung dari suatu elemen.
$("#container").children().css("color", "blue");
-
.find()
Mencari elemen anak (bisa level berapa pun) berdasarkan selector tertentu.
$("#container").find("p").css("font-weight", "bold");
3. Menelusuri Elemen Sibling
-
.siblings()
Mengambil semua elemen saudara (se-level) dari elemen yang dipilih.
$(".aktif").siblings().css("opacity", "0.5");
-
next() dan prev()
Mengambil elemen setelah atau sebelum elemen yang dipilih.
$(".item-terpilih").next().css("background", "yellow");
$(".item-terpilih").prev().css("background", "lightblue");
4. Contoh Lengkap HTML + jQuery
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Traversal DOM</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box { padding: 10px; margin: 5px; border: 1px solid #ccc; }
.aktif { background-color: lightgreen; }
</style>
</head>
<body>
<div id="container">
<div class="box">Box 1</div>
<div class="box aktif">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
<p id="paragraf">Ini adalah paragraf dalam container.</p>
<button id="highlightParent">Highlight Parent</button>
<button id="highlightSiblings">Highlight Siblings</button>
<button id="highlightNext">Highlight Next</button>
<button id="highlightChildren">Highlight Children</button>
<script>
$(document).ready(function() {
$("#highlightParent").click(function() {
$("#paragraf").parent().css("border", "2px dashed red");
});
$("#highlightSiblings").click(function() {
$(".aktif").siblings().css("background", "lightgray");
});
$("#highlightNext").click(function() {
$(".aktif").next().css("border", "2px solid orange");
});
$("#highlightChildren").click(function() {
$("#container").children().css("color", "blue");
});
});
</script>
</body>
</html>
Kesimpulan
Traversal DOM membantu kita menjelajahi dan memanipulasi elemen-elemen di dalam dokumen HTML dengan lebih fleksibel dan efisien.
Dengan method seperti .parent(), .children(), .siblings(), dan .find(), kita bisa memilih elemen berdasarkan struktur, bukan hanya ID atau class.
Di seri berikutnya, kita akan belajar tentang Method Chaining di jQuery.
Terima Kasih