เมธอด HTML DOM hasChildNodes() ใช้สำหรับตรวจสอบว่าองค์ประกอบมีโหนดย่อยหรือไม่ คืนค่า จริง หากองค์ประกอบมีโหนดย่อย มิฉะนั้น จะคืนค่า เท็จ มันจะพิจารณาช่องว่างใด ๆ เป็นโหนดย่อยเนื่องจากช่องว่างภายในโหนดนั้นโดยทั่วไปถือว่าเป็นโหนดข้อความ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับวิธี hasChildNodes() -
node.hasChildNodes()
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับเมธอด hasChildNodes() -
<!DOCTYPE html>
<html>
<head>
<script>
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
}
</script>
</head>
<body>
<h1> hasChildNodes() method example</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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มตรวจสอบ -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้าง
องค์ประกอบที่มีรหัส “DIV1” และมี
องค์ประกอบและ องค์ประกอบภายใน -
<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>
จากนั้นเราได้สร้างปุ่ม CHECK ที่จะรันเมธอด checkChild() เมื่อผู้ใช้คลิก -
<button onclick="checkChild()">CHECK</button>
เมธอด checkChild() ใช้เมธอด getElementById() เพื่อรับองค์ประกอบ
ที่สอดคล้องกันและเมธอด hasChildNodes() เนื่องจากองค์ประกอบ div มีลูกสองคนอยู่ข้างใน ดังนั้นมันจะคืนค่าเป็นจริง เช่นเดียวกันจะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
} 