คุณสมบัติ 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>คลิกปุ่มด้านล่างเพื่อหา childnodes ขององค์ประกอบ div</p> <button onclick="countNodes()">COUNT</button> <div id="DIV1"> <p>องค์ประกอบ p แรก</p> <p>องค์ประกอบ p ที่สอง</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>

ผลลัพธ์

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

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

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

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

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

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

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

ฟังก์ชัน countNodes() ดึงองค์ประกอบที่มี id เท่ากับ "DIV1" ซึ่งในกรณีนี้คือองค์ประกอบ <div> และดึงค่าคุณสมบัติ childNodes.length แล้วกำหนดให้ตัวแปร x

เนื่องจากมีช่องว่างสามช่องและสององค์ประกอบ <p> ภายในแท็ก <div> 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"; }