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

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

ไวยากรณ์

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

node.childElementCount

ตัวอย่าง

ลองดูตัวอย่างสำหรับคุณสมบัติ HTML DOM childElementCount -

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

ผลลัพธ์

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

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

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

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

div { border: 2px solid blue; margin: 7px; padding-left:20px; } <div id="myDIV"> <h3>HEADING</h3> <p>องค์ประกอบ p แรก</p> <p>องค์ประกอบ p ที่สอง</p> </div>

เราสร้างปุ่ม COUNT ซึ่งจะเรียกใช้เมธอด childCount() เมื่อคลิก

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

เมธอด childCount() ดึงองค์ประกอบที่มี id "myDIV" ซึ่งในกรณีนี้คือ <div> และกำหนดค่าคุณสมบัติ childElementCount ให้ตัวแปร x เนื่องจากเรามีสององค์ประกอบ <p> และหนึ่งองค์ประกอบ <h3> ภายใน <div> ดังนั้น childElementCount จึงคืนค่า 3

ค่าที่คืนกลับจะถูกแสดงในย่อหน้าที่มี id "Sample" โดยใช้เมธอด innerHTML บนย่อหน้า -

function childCount() { var x = document.getElementById("myDIV").childElementCount; document.getElementById("Sample").innerHTML = "The div element has " + x + " children"; }