คำแถลง! - บทความนี้เป็นบทความที่ตีพิมพ์ซ้ำของคนอื่น เนื่องจากมีการใช้งานและรู้สึกว่าใช้งานได้จริงมาก ดังนั้นฉันจึงหยิบมันขึ้นมาเพื่อใช้ในอนาคต! -
ขอขอบคุณผู้เขียนต้นฉบับ! - - -
ในการพัฒนาเว็บแอปพลิเคชัน โดยเฉพาะโปรแกรม Web 2.0 มักจำเป็นต้องได้รับองค์ประกอบในเพจ จากนั้นจึงอัปเดตสไตล์ เนื้อหา ฯลฯ ขององค์ประกอบ วิธีรับองค์ประกอบที่จะอัปเดตคือปัญหาแรกที่ต้องแก้ไข โชคดีที่มีหลายวิธีในการรับโหนดโดยใช้ JavaScript นี่คือบทสรุปโดยย่อ (วิธีต่อไปนี้ได้รับการทดสอบใน IE7 และ Firefox2.0.0.11):
1. รับผ่านโหนดเอกสารระดับบนสุด:
(1) document.getElementById(elementId): วิธีการนี้สามารถรับองค์ประกอบที่ต้องการได้อย่างถูกต้องผ่าน ID ของโหนด ซึ่งเป็นวิธีที่ค่อนข้างง่ายและรวดเร็ว หากเพจมีหลายโหนดที่มี ID เดียวกัน ระบบจะส่งคืนเฉพาะโหนดแรกเท่านั้น
ปัจจุบันมีไลบรารี JavaScript มากมาย เช่น Prototype และ Mootools ซึ่งมีวิธีการที่ง่ายกว่า: $(id) และพารามิเตอร์ยังคงเป็น ID ของโหนด วิธีนี้สามารถถือเป็นอีกวิธีหนึ่งในการเขียน document.getElementById() แต่ฟังก์ชันของ $() นั้นมีประสิทธิภาพมากกว่า สำหรับการใช้งานเฉพาะ โปรดดูเอกสาร API ที่เกี่ยวข้อง
(2) document.getElementsByName(elementName): วิธีการนี้รับโหนดตามชื่อ ดังที่เห็นได้จากชื่อ วิธีการนี้จะส่งคืนไม่ใช่องค์ประกอบโหนด แต่เป็นอาร์เรย์ของโหนดที่มีชื่อเดียวกัน จากนั้นเราสามารถวนซ้ำแอตทริบิวต์บางอย่างของโหนดเพื่อพิจารณาว่าเป็นโหนดที่ต้องการหรือไม่
ตัวอย่างเช่น: ใน HTML ช่องทำเครื่องหมายและวิทยุใช้ค่าแอตทริบิวต์ชื่อเดียวกันเพื่อระบุองค์ประกอบภายในกลุ่ม หากเราต้องการรับองค์ประกอบที่เลือกตอนนี้ เราจะได้องค์ประกอบที่ถูกสับก่อน จากนั้นจึงวนซ้ำเพื่อตรวจสอบว่าค่าแอตทริบิวต์ที่ตรวจสอบของโหนดเป็นจริงหรือไม่
(3) document.getElementsByTagName(tagName): วิธีการนี้รับโหนดผ่านแท็ก วิธีนี้ยังส่งคืนอาร์เรย์ ตัวอย่างเช่น document.getElementsByTagName('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 แต่ Firefox2.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 เช่น Prototype คุณอาจได้รับวิธีการอื่นๆ เช่น การรับผ่านคลาสของโหนด เป็นต้น อย่างไรก็ตาม หากคุณสามารถใช้วิธีการต่างๆ ข้างต้นได้อย่างยืดหยุ่น ฉันเชื่อว่าคุณควรจะสามารถจัดการกับโปรแกรมส่วนใหญ่ได้
โปรดทราบว่านี่คือเอกสารที่ทำซ้ำ: ไม่แนะนำให้รับโหนด HTML ผ่าน firstChild และ LastChild เพราะขึ้นอยู่กับเบราว์เซอร์ firstChild อาจส่งคืนวัตถุแอตทริบิวต์ของ parentObj