Traversing adalah mencari suatu elemen HTML berdasarkan hubungan (relation) dengan elemen HTML lainnya. Pencarian dimulai dari suatu elemen tertentu dan diteruskan sampai elemen yang dicari diketemukan. Pencarian dengan metode traversing dilakukan di dalam suatu tree elemen (DOM tree) yang mengandung banyak cabang-cabang dan turunan.
JQuery Traversing merujuk pada posisi elemen dalam tree elemen, apakah sebagai induk (parent) atau sebagai anak (child) atau setingkat (sibling) bagi elemen HTML lain. Misalkan lemen div adalah induk dari elemen p ( div > p ), atau elemen ul adalah anak dari elemen span ( span > ul ), dan elemen li pertama apakah sejajar dengan elemen li kedua.
Hubungan Antar Elemen HTML
Secara garis besar hubungan atau relasi antara elemen HTML terdiri dari induk atau parent, child atau anak, sejajar atau sibling, descendant dan ancestor.
- Parent (induk) adalah elemen HTML yang tepat berada di atas elemen-elemen HTML lain.
- Child (anak) adalah elemen HTML yang tepat berada di dalam elemen lain.
- Descendant adalah anak dari anak suatu elemen HTML.
- Ancestor adalah induk dari induk suatu elemen HTML.
- Sibling adalah elemen-elemen HTML yang berada dalam posisi sejajar.
Contoh Relasi Antar Elemen HTML
Perhatikan susunan elemen-elemen HTML di bawah ini. Elemen-elemen tersebut berada di dalam tree elemen (DOM tree).
- Elemen div adalah parent dari elemen ul dan ancestor dari semua elemen lainnya
- Elemen ul adalah parent dari elemen li dan child dari elemen div di atasnya
- Elemen li kiri adalah parent dari elemen span, child dari elemen ul dan descendant dari elemen div paling atas
- Elemen span adalah child dari elemen li kiri dan descendant dari elemen ul dan div paling atas
- Dua elemen li adalah sibling, mereka mempunyai parent yang sama
- Elemen li kanan adalah parent dari elemen b, child dari elemen ul dan descendant dari elemen div
- Elemen b adalah child dari elemen li kanan dan descendant dari elemen ul dan div
Tutorial sebelumnya : Menghapus Elemen Dan Konten
Tutorial setelahnya : Mencari Elemen Induk
Semua Tutorial JQuery : Tutorial JQuery