ในการพัฒนาเว็บแอปพลิเคชันโดยเฉพาะอย่างยิ่งโปรแกรม WEB2.0 มักจำเป็นต้องได้รับองค์ประกอบในหน้าแล้วอัปเดตสไตล์เนื้อหา ฯลฯ ขององค์ประกอบ วิธีการรับองค์ประกอบที่จะอัปเดตเป็นปัญหาแรกที่จะแก้ไข เป็นเรื่องน่ายินดีที่มีหลายวิธีในการรับโหนดโดยใช้ JavaScript นี่คือสรุปสั้น ๆ (วิธีการต่อไปนี้ถูกทดสอบใน IE7 และ Firefox 2.0.0.11):
1. ผ่านโหนดเอกสารระดับบน:
(1) Document.getElementById (ElementId): วิธีนี้สามารถรับองค์ประกอบที่ต้องการได้อย่างถูกต้องผ่านโหนด ID ซึ่งเป็นวิธีที่ค่อนข้างง่ายและรวดเร็ว หากหน้ามีหลายโหนดที่มี ID เดียวกันนั้นจะส่งคืนโหนดแรกเท่านั้น
ทุกวันนี้ไลบรารี JavaScript หลายรายการเช่นต้นแบบและ mootools ปรากฏขึ้นซึ่งให้วิธีที่ง่ายกว่า: $ (id) และพารามิเตอร์ยังคงเป็น ID ของโหนด วิธีนี้ถือได้ว่าเป็น
อีกวิธีหนึ่งในการเขียน document.getElementById () แต่ฟังก์ชั่นของ $ () มีประสิทธิภาพมากกว่า สำหรับการใช้งานเฉพาะโปรดดูเอกสาร API ที่เกี่ยวข้อง
(2) Document.getElementSbyName (ElementName): วิธีนี้ได้รับโหนดผ่านชื่อของโหนด จากชื่อจะเห็นได้ว่าวิธีนี้ส่งคืนองค์ประกอบโหนด แต่เป็นอาร์เรย์ของโหนดที่มีชื่อเดียวกัน จากนั้นเราสามารถวนผ่านแอตทริบิวต์ของโหนดเพื่อรับลูปเพื่อตรวจสอบว่าเป็นโหนดที่ต้องการหรือไม่
ตัวอย่างเช่น: ใน HTML ช่องทำเครื่องหมายและวิทยุทั้งคู่ใช้ค่าแอตทริบิวต์ชื่อเดียวกันเพื่อระบุองค์ประกอบในกลุ่ม หากเราต้องการรับองค์ประกอบที่เลือกตอนนี้เราจะได้รับองค์ประกอบที่สับเปลี่ยนก่อนแล้วจึงวนซ้ำเพื่อตรวจสอบว่าค่าแอตทริบิวต์ที่ตรวจสอบของโหนดเป็นจริงหรือไม่
(3) document.getElementByTagname (tagname): วิธีนี้ได้รับโหนดผ่านแท็กของโหนดและวิธีการยังส่งคืนอาร์เรย์เช่น:
document.getElementByTagname ('a') จะส่งคืนโหนดไฮเปอร์ลิงก์ทั้งหมดในหน้า ก่อนที่จะได้รับโหนดคุณมักจะรู้ประเภทของโหนดดังนั้นการใช้วิธีนี้ค่อนข้างง่าย แต่ข้อเสียก็ชัดเจนนั่นคืออาร์เรย์ที่ส่งคืนอาจมีขนาดใหญ่มากซึ่งจะเสียเวลามาก ดังนั้นวิธีนี้ไร้ประโยชน์หรือไม่? ไม่แน่นอน วิธีนี้แตกต่างจากสองข้างต้น ไม่ใช่วิธีการที่เป็นกรรมสิทธิ์ของโหนดเอกสาร สามารถใช้โหนดอื่น ๆ ตามที่กล่าวไว้ด้านล่าง
2. ผ่านโหนดพาเรนต์:
(1) Parentobj.firstchild: วิธีนี้สามารถใช้งานได้หากโหนดเป็นลูกแรกของโหนดที่รู้จัก (Parentobj) คุณสมบัตินี้สามารถใช้ซ้ำได้ซึ่งหมายความว่าได้รับการสนับสนุน
parentobj.firstchild.firstchild.firstchild ... ดังนั้นคุณจะได้รับโหนดที่ลึกกว่า
(2) Parentobj.lastchild: เห็นได้ชัดว่าคุณสมบัตินี้เป็นโหนดลูกสุดท้ายของโหนดที่รู้จัก (parentobj) เช่นเดียวกับ FirstChild สามารถใช้ซ้ำได้
ในการใช้งานถ้าเรารวมทั้งสองเราจะได้รับเอฟเฟกต์ที่น่าตื่นเต้นมากขึ้นคือ: Parentobj.firstchild.lastchild.lastchild ...
(3) Parentobj.childnodes: รับอาร์เรย์โหนดลูกของโหนดที่รู้จักและจากนั้นคุณสามารถค้นหาโหนดที่ต้องการผ่านลูปหรือดัชนี
หมายเหตุ: หลังจากการทดสอบพบว่าอาร์เรย์ของโหนดเด็กโดยตรงจะได้รับใน IE7 ในขณะที่อาร์เรย์ของโหนดเด็กได้รับบน firefox2.0.0.11 เป็นโหนดเด็กทั้งหมดนั่นคือโหนดเด็กรวมถึงโหนดเด็ก
(4) Parentobj.children: รับอาเรย์โหนดลูกโดยตรงของโหนดที่รู้จัก
หมายเหตุ: หลังจากการทดสอบบน IE7 เอฟเฟกต์จะเหมือนกับ ChildNodes แต่ Firefox 2.0.0.11 ไม่รองรับ นี่คือเหตุผลที่ฉันต้องการใช้สไตล์ที่แตกต่างจากวิธีอื่น ๆ ดังนั้นจึงไม่แนะนำให้ใช้
(5) Parentobj.getElementsByTagname (tagname): วิธีการใช้งานจะไม่ถูกทำซ้ำมันจะส่งคืนอาร์เรย์ของโหนดลูกของโหนดที่รู้จักด้วยค่าที่ระบุในโหนดเด็กทั้งหมดของโหนดที่รู้จัก ตัวอย่างเช่น:
Parentobj.getElementsByTagname ('a') ส่งคืนไฮเปอร์ลิงก์ทั้งหมดในโหนดลูกที่รู้จัก
3. ได้รับผ่านโหนดที่อยู่ติดกัน:
(1) Neighbornode.previoussibling: รับโหนดก่อนหน้าของโหนดที่รู้จัก (Neighbournode) คุณสมบัตินี้ดูเหมือนว่าจะถูกใช้ซ้ำเช่นเดียวกับ FirstChild และ LastChild ในรายการก่อนหน้า
(2) Neighbornode.nextsibling: รับโหนดถัดไปของโหนดที่รู้จัก (Neighbournode) ซึ่งรองรับการเรียกซ้ำ
4. รับผ่านโหนดเด็ก:
(1) ChildNode.ParentNode: รับโหนดพาเรนต์ของโหนดที่รู้จัก
วิธีการที่กล่าวถึงข้างต้นเป็นเพียงวิธีพื้นฐานบางอย่าง หากคุณใช้ไลบรารี JavaScript เช่นต้นแบบคุณอาจได้รับวิธีการอื่น ๆ เช่นการได้มาเรียนผ่านโหนด ฯลฯ อย่างไรก็ตามหากวิธีการข้างต้นสามารถใช้งานได้อย่างยืดหยุ่นฉันเชื่อว่าขั้นตอนส่วนใหญ่ควรจะรับมือได้