ใน JavaScript ต้นไม้ DOM จะเป็นไปตามโครงสร้างแบบลำดับชั้นที่มีรายการโหนดจำนวนมาก โครงสร้างเริ่มต้นจากรูทโหนด (Document) จากนั้นต่อท้ายด้วยโหนดหลักและโหนดย่อย ในการเข้าถึงโหนดลูกเหล่านี้ JavaScript เสนอ ' โหนดลูก ' คุณสมบัติ. คุณสมบัตินี้ช่วยให้ผู้ใช้เข้าถึงโหนดย่อยทั้งหมดหรือโหนดเฉพาะขององค์ประกอบพาเรนต์ที่เกี่ยวข้อง
โพสต์นี้อธิบายรายละเอียดเกี่ยวกับวัตถุประสงค์และการทำงานของคุณสมบัติ 'โหนดย่อย' ขององค์ประกอบ HTML DOM ใน JavaScript
คุณสมบัติ HTML DOM Element “childNodes” ใน JavaScript คืออะไร
“ โหนดลูก ” เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ส่งคืนรายการโหนดย่อยทั้งหมดขององค์ประกอบในรูปแบบของวัตถุ NodeList คุณสมบัติพิเศษนี้สามารถใช้เพื่อเข้าถึงโหนดย่อยเฉพาะขององค์ประกอบหลัก โหนดลูกเริ่มต้นจากดัชนี '0 (ศูนย์)' ยิ่งไปกว่านั้น ช่องว่าง ความคิดเห็น และโหนดข้อความยังถือเป็นโหนดย่อยอีกด้วย
ไวยากรณ์
element.childโหนด
ไวยากรณ์ที่อธิบายไว้ข้างต้นจะส่งกลับวัตถุ NodeList ที่มีโหนดย่อยขององค์ประกอบเป้าหมาย
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในทางปฏิบัติ
รหัส HTML
ขั้นแรก ดูรหัส HTML ที่ระบุไว้:
< แผนก รหัส = 'ดิฟ' สไตล์ = 'เส้นขอบ: สีดำทึบ 2px; ความสูง: 200px; ความกว้าง: 250px; การเติม: 10px' >< ชั่วโมง2 > หัวเรื่องแรก ชั่วโมง2 >
< h3 > หัวเรื่องที่สอง h3 >
< หน้า > วรรคแรก หน้า >
< หน้า > ย่อหน้าที่สอง หน้า >
แผนก >
< หน้า รหัส = 'สำหรับ' > หน้า >
ในบรรทัดรหัสด้านบน:
- เพิ่ม ' ” องค์ประกอบที่มีรหัส “Div” ซึ่งจัดรูปแบบโดยใช้คุณสมบัติที่ระบุ (เส้นขอบ ความสูง และความกว้าง)
- ภายในองค์ประกอบ “
” กำหนดสองหัวเรื่องและสองย่อหน้าตามลำดับ- สุดท้ายนี้ “ ” แท็กฝังย่อหน้าว่างด้วยรหัส 'para'
บันทึก: รหัส HTML ที่ระบุไว้จะพิจารณาตลอดทั้งโพสต์นี้
ตัวอย่างที่ 1: การใช้คุณสมบัติ 'โหนดย่อย' เพื่อรับจำนวนโหนดย่อยทั้งหมดขององค์ประกอบเฉพาะ
ตัวอย่างนี้ใช้คุณสมบัติ 'โหนดย่อย' และ 'ความยาว' เพื่อรับจำนวนโหนดย่อยทั้งหมดที่มีอยู่ในองค์ประกอบพาเรนต์เฉพาะ
รหัสจาวาสคริปต์
ทำตามรหัสที่กำหนด:
< สคริปต์ >
องค์ประกอบ const = document.getElementById ( 'ดิฟ' ) ;
อนุญาต จำนวน = elem.childNodes.length;
document.getElementById ( 'สำหรับ' ) .innerHTML = 'ค่า: ' + จำนวน;
สคริปต์ >ในบรรทัดโค้ดด้านบน:
- ตัวแปร “elem” ใช้ “ getElementById() ” วิธีการเข้าถึงองค์ประกอบหลักที่มีรหัสเป็น “Div”
- ตัวแปร “num” ใช้เครื่องหมาย “ โหนดลูก ' และ ' ความยาว ” คุณสมบัติเพื่อรับจำนวนโหนดย่อยที่มีอยู่ในองค์ประกอบ “” ที่เข้าถึงได้
- สุดท้าย เมธอด “getElementById()” จะดึงย่อหน้าว่างที่ฝังไว้ผ่าน id “para” เพื่อต่อท้ายด้วยค่าตัวแปร “num”
เอาต์พุต
ผลลัพธ์แสดงว่ามีทั้งหมด “ 9 ” โหนดย่อยในองค์ประกอบ “
” ที่กำหนด รวมถึงช่องว่างระหว่างองค์ประกอบต่างๆตัวอย่างที่ 2: การใช้คุณสมบัติ 'โหนดย่อย' เพื่อรับชื่อของโหนดย่อยเฉพาะ
คุณสมบัติ 'โหนดย่อย' ยังสามารถใช้กับคุณสมบัติ 'nodeName' เพื่อรับชื่อโหนดย่อย มาดูกันในทางปฏิบัติ
รหัสจาวาสคริปต์
ผ่านรหัสต่อไปนี้:
< สคริปต์ >
องค์ประกอบ const = document.getElementById ( 'ดิฟ' ) ;
อนุญาต จำนวน = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'สำหรับ' ) .innerHTML = 'องค์ประกอบ: ' +จำนวน;
สคริปต์ >ที่นี่ “ โหนดลูก ” คุณสมบัติเชื่อมโยงกับ “ ชื่อโหนด คุณสมบัติ ” เพื่อรับชื่อโหนดลูกที่ระบุตามดัชนีที่เข้าถึงเช่น “1”
เอาต์พุต
เอาต์พุตจะแสดงชื่อโหนดย่อย เช่น องค์ประกอบ “H2” เทียบกับดัชนีที่ระบุ
ตัวอย่างที่ 3: การใช้คุณสมบัติ 'โหนดย่อย' เพื่อเปลี่ยนสีข้อความของโหนดย่อยที่ระบุ
ตัวอย่างนี้ใช้คุณสมบัติที่กล่าวถึงเพื่อเปลี่ยนสีของเด็กเป้าหมายที่จัดทำดัชนี
รหัสจาวาสคริปต์
พิจารณารหัสต่อไปนี้:
< สคริปต์ >
document.getElementById ( 'ดิฟ' ) .childโหนด [ 3 ] .style.color = 'สีเขียว' ;
สคริปต์ >ที่นี่ “ getElementById() ” วิธีการดึงพาเรนต์องค์ประกอบ “
” ผ่าน id “Div” และโหนดลูกวางไว้ที่ดัชนีที่ระบุผ่าน “ โหนดลูก ” ทรัพย์สินตามลำดับ หลังจากนั้นให้ใช้ปุ่ม “ สไตล์.สี คุณสมบัติ ” เพื่อเปลี่ยนสีข้อความของโหนดย่อยที่เข้าถึงเอาต์พุต
ผลลัพธ์ยืนยันว่าสีข้อความของโหนดย่อยที่ระบุมีการเปลี่ยนแปลงอย่างเหมาะสม
บทสรุป
ในจาวาสคริปต์ “ โหนดลูก ” คุณสมบัติดึงวัตถุ nodeList ที่มีโหนดลูกขององค์ประกอบ HTML เป้าหมาย โหนดย่อยสามารถเข้าถึงได้ทั้งหมดในคราวเดียวหรือโหนดที่ต้องการโดยระบุหมายเลขดัชนีด้วยคุณสมบัติ 'โหนดย่อย' คุณสมบัตินี้อนุญาตให้เรียกใช้ฟังก์ชัน JavaScript เพื่อทำงานพิเศษบนโหนดย่อยที่เข้าถึงได้ บทความนี้กล่าวถึงการใช้คุณสมบัติ 'โหนดย่อย' ใน JavaScript
- ภายในองค์ประกอบ “