คุณสมบัติ HTML DOM children

คุณสมบัติ HTML DOM children ใช้สำหรับคืนค่าองค์ประกอบลูกทั้งหมดขององค์ประกอบที่ระบุในรูปแบบ HTML collection เป็นคุณสมบัติแบบอ่านอย่างเดียว (read-only) องค์ประกอบที่ได้สามารถเข้าถึงได้โดยใช้หมายเลขดัชนีซึ่งเริ่มต้นจาก 0

องค์ปรากฏปรากฏในลำดับเดียวกับที่อยู่ในเอกสาร HTML มีเฉพาะโหนดลูกเท่านั้น และไม่รวมช่องว่างและความคิดเห็นเหมือนคุณสมบัติ childNodes

ไวยากรณ์

ไวยากรณ์สำหรับคุณสมบัติ children ดังนี้ -

element.children

ลองดูตัวอย่างของคุณสมบัติ HTML DOM children -

<!DOCTYPE html> <html> <head> <style> div { border: 1px solid blue; margin: 7px; } </style> </head> <body> <p>คลิกปุ่มด้านล่างเพื่อหาจำนวนองค์ประกอบลูกของ div</p> <button onclick="myChild()">COUNT</button> <div id="DIV1"> <p>องค์ประกอบ p แรก</p> <p>องค์ประกอบ p ที่สอง</p> </div> <p id="Sample"></p> <script> function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "The div element has " + x + " child nodes"; } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อคลิกปุ่ม COUNT -

ในตัวอย่างข้างต้น -

เราสร้างองค์ประกอบ <div> ที่มี id "DIV1" และมีสองย่อหน้าภายใน เราเพิ่มขอบสีและระยะห่างเพื่อแยกจากองค์ประกอบอื่น -

div { border: 1px solid blue; margin: 7px; } <div id="DIV1"> <p>องค์ประกอบ p แรก</p> <p>องค์ประกอบ p ที่สอง</p> </div>

เราสร้างปุ่ม COUNT ซึ่งจะเรียกใช้ฟังก์ชัน myChild() เมื่อผู้ใช้คลิก -

<button onclick="myChild()">COUNT</button>

ฟังก์ชัน myChild() ดึงองค์ประกอบที่มี id เท่ากับ "DIV1" ซึ่งในกรณีนี้คือองค์ประกอบ <div> และดึงค่าคุณสมบัติ children.length แล้วกำหนดให้ตัวแปร x สิ่งสำคัญคือคุณสมบัติ children ไม่พิจารณาช่องว่างและความคิดเห็น จึงจะพิจารณาเฉพาะสององค์ประกอบ <p> และ children.length จะคืนค่า 2 ค่านี้จะแสดงในย่อหน้าที่มี id "Sample" โดยใช้เมธอด innerHTML -

function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "The div element has " + x + " child nodes"; }