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

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

ไวยากรณ์

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

elementNodeReference.childNodes;

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find the div element childnodes.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
   function countNodes() {
      var x = document.getElementById("DIV1").childNodes.length;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
   }
</script>
</body>
</html>

ผลลัพธ์

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

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

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

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

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

เราได้สร้าง

องค์ประกอบที่มี id “DIV1” และมีสองย่อหน้าอยู่ภายใน เราได้เพิ่มเส้นขอบสีและระยะขอบบางส่วนเพื่อแยกความแตกต่างจากองค์ประกอบอื่นๆ สิ่งสำคัญที่นี่คือ มีการกดปุ่ม Enter สามปุ่มเพื่อให้แต่ละองค์ประกอบอยู่ในบรรทัดของตัวเอง ซึ่งจะสร้างช่องว่างทั้งหมดสามช่องในแท็ก

ออก

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

จากนั้นเราได้สร้างปุ่ม COUNT ที่จะรันเมธอด countNodes() เมื่อผู้ใช้คลิก

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

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

องค์ประกอบและรับค่าคุณสมบัติ childnodes.length และกำหนดให้กับตัวแปร x

เนื่องจากมีช่องว่างสามช่องและองค์ประกอบ

สองรายการภายในแท็ก

การส่งคืน childnodes.length 5. ค่าที่ส่งคืนจะแสดงในย่อหน้าด้วย id “Sample” โดยใช้เมธอด innerHTML()

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