เมธอด hasChildNodes() ใน HTML DOM

เมธอด hasChildNodes() ใน HTML DOM ใช้สำหรับตรวจสอบว่าองค์ประกอบมีโหนดลูก (child nodes) หรือไม่ คืนค่า true หากมีโหนดลูก false หากไม่มี โหนด whitespace (ช่องว่าง) ก็ถูกนับเป็นโหนดลูกเช่นกัน เนื่องจาก whitespace ภายในโหนดถูกจัดเป็น text node

ไวยากรณ์ (Syntax)

node.hasChildNodes()

ตัวอย่าง

ตัวอย่างการตรวจสอบว่า div มีโหนดลูกหรือไม่:

<!DOCTYPE html>
<html>
<head>
<script>
  function checkChild() {
    var hasChildren = document.getElementById("DIV1").hasChildNodes();
    document.getElementById("Sample").innerHTML = hasChildren;
  }
</script>
</head>
<body>
<h1>ตัวอย่างเมธอด hasChildNodes()</h1>
<div id="DIV1">
  <p>This is a p element inside the div element</p>
  <span>This is a span element inside the div element</span>
</div>
<br>
<button onclick="checkChild()">CHECK</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดง div ที่มี p และ span ภายใน พร้อมปุ่ม "CHECK"

เมื่อคลิกปุ่ม "CHECK" จะแสดง "true" (เพราะ div มี p และ span เป็นลูก)

คำอธิบายโค้ด

• สร้าง <div id="DIV1"> มี <p> และ <span> ภายใน
• สร้างปุ่ม "CHECK" เรียกใช้ checkChild() เมื่อคลิก
• ฟังก์ชัน checkChild() ดึง div ด้วย getElementById("DIV1") เรียก .hasChildNodes()
• คืนค่า true แสดงในย่อหน้า id="Sample"
• หมายเหตุ: หาก div ไม่มีช่องว่างระหว่างแท็กเปิด-ปิดและไม่มีลูก จะคืนค่า false แต่ถ้ามี whitespace (เว้นบรรทัด/เว้นวรรค) จะคืนค่า true เพราะ whitespace เป็น text node