การข้ามผ่าน DOM
การค้นหาองค์ประกอบตาม ID ประเภทองค์ประกอบ และชื่อคลาสมีประโยชน์มาก แต่ถ้าคุณต้องการค้นหาองค์ประกอบตามตำแหน่งในแผนผัง DOM ล่ะ กล่าวอีกนัยหนึ่ง คุณมีองค์ประกอบที่กำหนด และคุณต้องการค้นหาองค์ประกอบหลัก หนึ่งในลูก และโหนดก่อนหน้าหรือถัดไป ตัวอย่างเช่น ใช้โค้ด HTML ที่เป็นชิ้นเป็นอันต่อไปนี้:
รายการ 1: ส่วน HTML (ตาราง)
<ตาราง>
<หัว>
<tr>
<th>ชื่อ</th>
<th>ที่อยู่อีเมล</th>
<th>การกระทำ</th>
</tr>
</หัว>
<tbody>
<tr id="row-001">
<td>โจ เลนนอน</td>
<td>[email protected]</td>
<td><a href="#">แก้ไข</a>
<a href="#">ลบ</a></td>
</tr>
<tr id="row-002">
<td>จิล แม็ค สวีนีย์</td>
<td>จิล@example.com</td>
<td><a href="#">แก้ไข</a>
<a href="#">ลบ</a></td>
</tr>
</tbody>
</ตาราง>
รายการ 1 ใช้การเยื้องเพื่อระบุตำแหน่งของแต่ละโหนดองค์ประกอบในแผนผัง DOM ในตัวอย่างนี้ องค์ประกอบตารางเป็นองค์ประกอบรากและมีโหนดย่อยสองโหนด ได้แก่ thead และ tbody องค์ประกอบ thead มีโหนดลูก tr และ tr มีลูกสามคน - องค์ประกอบทั้งหมด องค์ประกอบ tbody มีโหนดลูก tr สองโหนด และโหนด tr แต่ละโหนดมีลูกสามคน โหนดที่สามในแต่ละบรรทัดด้านบนยังมีโหนดย่อย ซึ่งทั้งสองโหนดเป็นแท็กลิงก์สองแท็ก
ดังที่คุณทราบ คุณสามารถเลือกองค์ประกอบตาม ID ได้อย่างง่ายดายโดยใช้ฟังก์ชันเลือกของ เฟรมเวิร์ก JavaScript ในตัวอย่างนี้ มีสององค์ประกอบที่มีรหัส ซึ่งเป็นองค์ประกอบ tr ที่มีรหัส row-001 และแถว-002 หากต้องการเลือก tr แรกโดยใช้ไลบรารี Prototype คุณสามารถใช้โค้ดต่อไปนี้:
var theRow = $('row-001');
ในบทที่แล้ว คุณยังได้เรียนรู้เกี่ยวกับการใช้ตัวเลือกเพื่อดึงข้อมูลองค์ประกอบตามประเภทหรือคลาส ในตัวอย่างนี้ คุณสามารถใช้ไวยากรณ์ต่อไปนี้เพื่อรับองค์ประกอบ td ทั้งหมด
var allCells = $$('td');
ปัญหาหลักของการเปลี่ยนโค้ดคือมันจะส่งคืนทุกองค์ประกอบ td แต่ถ้าคุณต้องการรับองค์ประกอบ td ทั้งหมดของ tr ด้วย ID row-001 ล่ะ? นี่คือจุดที่ฟังก์ชันการแวะผ่าน DOM เข้ามามีบทบาท ขั้นแรก ลองใช้ต้นแบบเพื่อเลือกรายการย่อยทั้งหมดของ tr ที่มี ID แถว-001
var firstRowCells = theRow.childElements();
สิ่งนี้จะส่งคืนอาร์เรย์ขององค์ประกอบย่อยทั้งหมดของตัวแปรRow (ค่า tr ที่คุณตั้งค่าไว้ในตอนแรกด้วย ID แถว-001)
ต่อไป สมมติว่าคุณต้องการรับเฉพาะองค์ประกอบลูกแรกของแถวเท่านั้น ในกรณีนี้ นั่นคือองค์ประกอบ td ที่มีข้อความ "Joe Lennon" เมื่อต้องการทำเช่นนี้ ใช้คำสั่งต่อไปนี้:
var firstRowFirstCell = theRow.down();
ง่ายมาก! การใช้งานเฉพาะนี้เทียบเท่ากับ:
var firstRowFirstCell = theRow.childElements()[0];
นอกจากนี้ยังสามารถแสดงได้ดังนี้:
var firstRowFirstCell = theRow.down(0);
ดัชนี JavaScript เริ่มต้นที่ศูนย์ ดังนั้นคำสั่งข้างต้นจึงบอกให้ JavaScript เลือกองค์ประกอบย่อยตัวแรก ในการเลือกองค์ประกอบลูกที่สอง (เซลล์ที่มีที่อยู่อีเมล [email protected] ) คุณจะต้องใช้:
var firstRowSecondCell = theRow.down(1);
หรือคุณสามารถเรียกดู DOM ระหว่างโหนดพี่น้องได้ ในตัวอย่างนี้ เซลล์ที่สองคือเซลล์ลำดับถัดไปของเซลล์แรก ดังนั้น คุณสามารถใช้คำสั่งต่อไปนี้:
var firstRowSecondCell = firstRowFirstCell.next();
เช่นเดียวกับการทำงานของฟังก์ชัน down() การเลือกเซลล์ที่สามก็สามารถใช้ได้เช่นนี้
var firstRowThirdCell = firstRowFirstCell.next(1);
นอกจากการใช้ดัชนีเพื่อค้นหาโหนดเฉพาะแล้ว ไลบรารี Prototype ยังสามารถใช้ไวยากรณ์ตัวเลือก CSS ได้อีกด้วย ในรายการ 1 เรากำลังมองหาลิงก์ที่สอง (ลิงก์ "ลบ") ที่มีรายละเอียดของ Jill Mac Sweeney
var SecondRowSecondLink = $('row-002').down('a', 1);
ในตัวอย่างนี้ ใช้ฟังก์ชัน $ เพื่อค้นหาแถวที่มี ID แถว-002 โดยเลื่อนลงไปที่องค์ประกอบลำดับที่สอง (จุดยึด)
เฟรมเวิร์กบางตัวยังอนุญาตฟังก์ชันการข้ามแบบ "daisy-chaining" ซึ่งหมายความว่าคุณสามารถเชื่อมต่อคำสั่งการข้ามระหว่างกันได้ ในตัวอย่างข้างต้น นิพจน์อื่นของไลบรารี Prototype เป็นดังนี้:
var SecondRowSecondLink = $('row-002').down('a').next();
ลองดูตัวอย่างต่อไปนี้:
var domTraversal = $('row-001').down().up().next().previous();
อย่างที่คุณเห็น การเชื่อมต่อแบบเดซี่เชนช่วยให้คุณสามารถเชื่อมต่อคำสั่งการแวะผ่าน DOM หลายรายการได้ ในความเป็นจริง ตัวอย่างข้างต้นจบลงด้วยการเลือกองค์ประกอบ tr ด้วย ID แถว-001 ดังนั้นสายโซ่เดซี่จึงกลับไปยังจุดเริ่มต้น
ที่อยู่พิมพ์ซ้ำ: http://www.denisdeng.com/?p=708
ที่อยู่เดิม: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html