jQuery Traversing

Traversing คืออะไร?

jQuery traversing ซึ่งหมายถึง "เลื่อนผ่าน" ใช้เพื่อ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML ตามความสัมพันธ์กับองค์ประกอบอื่นๆ เริ่มต้นด้วยการเลือกหนึ่งรายการและเลื่อนผ่านการเลือกนั้นจนกว่าจะถึงองค์ประกอบที่คุณต้องการ

รูปภาพด้านล่างแสดงหน้า HTML เป็นแผนผัง (แผนผัง DOM) ด้วย jQuery traversing คุณสามารถเลื่อนขึ้น (บรรพบุรุษ) ลง (ลูกหลาน) และด้านข้าง (พี่น้อง) ในแผนผังได้อย่างง่ายดายโดยเริ่มจากองค์ประกอบที่เลือก (ปัจจุบัน) การเคลื่อนไหวนี้เรียกว่า traversing - หรือเคลื่อนผ่าน - DOM tree

ภาพประกอบอธิบาย:

<div> องค์ประกอบเป็นพาเรนต์ของ <ul> และเป็นบรรพบุรุษ ของทุกสิ่งที่อยู่ภายใน
<ul> องค์ประกอบเป็นพาเรนต์ของทั้ง <li> องค์ประกอบและลูกของ <div>
องค์ประกอบ <li> ด้านซ้ายเป็นพาเรนต์ของ <span> ลูกของ <ul> และทายาทของ <div>
<span> องค์ประกอบเป็นลูกของ <li> ด้านซ้ายและ ทายาทของ <ul> และ <div>
องค์ประกอบ <li> ทั้งสองเป็นพี่น้องกัน (มีผู้ปกครองคนเดียวกัน)
องค์ประกอบ <li> ที่ถูกต้องคือพาเรนต์ของ <b> ลูกของ <ul> และทายาทของ <div>
<b> องค์ประกอบเป็นลูกของ <li> ที่ถูกต้องและเป็น ทายาทของ <ul> และ <div>

บรรพบุรุษคือพ่อแม่ปู่ย่าตายายปู่ย่าตายายเป็นต้น
ทายาทคือลูก หลาน เหลน เป็นต้น
พี่น้องร่วมบิดามารดาเดียวกัน

ข้าม DOM

jQuery มีวิธีการที่หลากหลายที่ช่วยให้เราสามารถสำรวจ DOM

วิธีการข้ามประเภทที่ใหญ่ที่สุดคือการข้ามต้นไม้

บทต่อไปจะแสดงวิธีเดินทางขึ้น ลง และไปด้านข้างในแผนผัง DOM