ฟังก์ชั่น ParentNode และ ParentElement นั้นเหมือนกันและฟังก์ชั่นเด็กและเด็กก็เหมือนกัน อย่างไรก็ตาม ParentNode และ ChildNodes เป็นไปตามมาตรฐาน W3C ซึ่งอาจกล่าวได้ว่าค่อนข้างทั่วไป อีกสองคนได้รับการสนับสนุนโดย IE ไม่ใช่มาตรฐานและ Firefox ไม่รองรับ
ตัวอย่าง:
"ParentNode" มักจะใช้เพื่อรับโหนดพาเรนต์ขององค์ประกอบที่แน่นอน ทำความเข้าใจ ParentNodes เป็นคอนเทนเนอร์และมีโหนดเด็กในคอนเทนเนอร์ดังนี้:
<div id = "parent"> <b id = "child"> ข้อความของฉัน </b> </div>
ในรหัสข้างต้นคุณจะเห็นว่า "พ่อ" ใช้เป็นตู้คอนเทนเนอร์ DIV ซึ่งมี "เด็ก" ในคอนเทนเนอร์ซึ่งเป็นส่วนข้อความตัวหนา หากคุณวางแผนที่จะใช้วิธี GetElementById () เพื่อรับองค์ประกอบตัวหนาและต้องการทราบว่าใครคือ "พ่อ" ข้อมูลที่ส่งคืนจะเป็น DIV สคริปต์ต่อไปนี้มีดังนี้:
<script type = "text/javascript"> <!-Alert (document.getElementById "child"). parentNode.NodeName); //-> </script>
การใช้ ParentNode ไม่ได้หมายความว่าพบ "พ่อ" เพียงคนเดียว "ลูกชาย" สามารถกลายเป็น "พ่อ" ได้เช่นเดียวกับในตัวอย่างต่อไปนี้ ...
<div id = "parent"> <div id = "childparent"> <b id = "child"> ข้อความของฉัน </b> </div> </div>
มี "พ่อ" สองคนและ "เด็ก" สองคนในรหัสด้านบน Div แรก (ID "Parent") คือ "พ่อ" ของ Div ที่สอง (ChildParent) มีองค์ประกอบที่เป็นตัวหนา (ID "เด็ก") ใน "ChildParent" ซึ่งเป็น "เด็ก" ของ "Childparent" Div ดังนั้นวิธีการเข้าถึง "ปู่" (รหัส "ผู้ปกครอง")? ดังนี้:
<script type = "text/javascript"> <!-Alert (document.getElementById ("child"). parentNode.parentNode.NodeName); //-> </script>คุณสังเกตเห็นว่า parentnodes ทั้งสองใช้ร่วมกันหรือไม่? "parentNode.parentNode" parentNode แรกคือ div (id "childparent") เนื่องจากเราต้องการรับองค์ประกอบหลักด้านนอกสุดเราจึงเพิ่ม parentNode อื่นแล้วเราไปถึง div (ID "Parent")
การใช้ ParentNode ไม่เพียง แต่พบชื่อ nodename ขององค์ประกอบ แต่ยังมากขึ้น ตัวอย่างเช่นคุณสามารถรับโหนดพาเรนต์ที่มีองค์ประกอบจำนวนมากและเพิ่มโหนดใหม่ในตอนท้าย เช่นมีชื่อของตัวเองที่เรียกว่า "parentelement" และขอแนะนำให้ใช้ ParentNode สำหรับสคริปต์ข้ามเบราว์เซอร์
บทความข้างต้นพูดสั้น ๆ เกี่ยวกับโหนดแม่และโหนดลูกขององค์ประกอบ HTML ของ JS นี่คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น