คุณสมบัติลูก HTML DOM

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

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติลูก -

element.children

ให้เรามาดูตัวอย่างคุณสมบัติลูก HTML DOM -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the number of div element children</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element </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>

ผลลัพธ์

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

คุณสมบัติลูก HTML DOM

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

คุณสมบัติลูก HTML DOM

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

เราได้สร้าง

องค์ประกอบที่มี id “DIV1” และมีสองย่อหน้าอยู่ภายใน เราได้เพิ่มเส้นขอบสีและระยะขอบบางส่วนเพื่อแยกความแตกต่างจากองค์ประกอบอื่นๆ −

div {
   border: 1px solid blue;
   margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>

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

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

ฟังก์ชัน myChild() รับองค์ประกอบที่มี id เท่ากับ “DIV1” ซึ่งในกรณีของเราคือ

องค์ประกอบและรับค่าคุณสมบัติ children.length และกำหนดค่าให้กับตัวแปร x สิ่งสำคัญที่นี่คือคุณสมบัติ children ไม่พิจารณาช่องว่างและความคิดเห็น ดังนั้นจะพิจารณาเฉพาะสององค์ประกอบ

และ 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";
}