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

คุณสมบัติ HTML DOM childElementCount เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ส่งคืนจำนวนองค์ประกอบย่อยขององค์ประกอบที่กำหนด ชนิดส่งคืนของ childElementCount มีความยาวที่ไม่ได้ลงนาม โดยจะส่งคืนเฉพาะองค์ประกอบย่อยของโหนดที่มีการสืบค้น ไม่ใช่โหนดย่อยทั้งหมดของเอกสาร 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>Click the button below to find out the no of children of the div element</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

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

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

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

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

เราได้สร้าง

องค์ประกอบที่มี id “myDIV” และสามองค์ประกอบที่อยู่ภายใน

สององค์ประกอบและส่วนหัว

นอกจากนี้เรายังได้เพิ่มเส้นขอบสี ระยะขอบ และช่องว่างภายในให้กับ div เพื่อแยกความแตกต่างจากองค์ประกอบอื่นๆ –

div {
   border: 2px solid blue;
   margin: 7px;
   padding-left:20px;
}
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>

จากนั้นเราได้สร้างปุ่ม COUNT ซึ่งจะรันเมธอด childCount() เมื่อคลิก

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

วิธี childCount() นำองค์ประกอบที่มี id “myDIV” ซึ่งในกรณีของเราคือ

องค์ประกอบและกำหนดค่าคุณสมบัติ childElementCount ให้กับตัวแปร x เนื่องจากเรามี

องค์ประกอบและ

องค์ประกอบภายใน

ดังนั้น childElementCount ส่งคืน 3

ค่าที่ส่งคืนจะแสดงในย่อหน้าด้วย id “Sample” โดยใช้วิธี innerHTML() ในย่อหน้า −

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