คุณสมบัติ HTML DOM firstChild ใช้สำหรับส่งคืนโหนดย่อยแรกของโหนดที่ระบุเป็นวัตถุโหนด มันสามารถส่งคืนเป็นโหนดข้อความ โหนดองค์ประกอบ หรือโหนดความคิดเห็นขึ้นอยู่กับว่าโหนดใดเป็นโหนดแรก นี่เป็นคุณสมบัติแบบอ่านอย่างเดียว
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ HTML DOM firstChild -
node.firstChild
ตัวอย่าง
เรามาดูตัวอย่างคุณสมบัติ firstChild กัน −
<!DOCTYPE html>
<html>
<head>
<script>
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first child node of the div is :"+ch;
}
</script>
</head>
<body>
<h1>firstChild property</h1>
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
<button onclick="getFirst()">Get Child</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม "รับลูก" -
เราได้สร้าง
และ องค์ประกอบอยู่ภายใน ไม่มีช่องว่างภายในองค์ประกอบ div เนื่องจากคุณสมบัติ firstChild ถือว่าช่องว่างเป็นโหนดข้อความและจะทำให้ช่องว่างเป็นลูกคนแรก ในกรณีนั้นมันจะกลับไม่ได้กำหนดไว้
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
จากนั้นเราได้สร้างปุ่ม "รับลูก" ที่จะรันเมธอด getFirst() เมื่อผู้ใช้คลิก -
<button onclick="getFirst()">Get Child</button>
เมธอด getFirst() รับลูกคนแรกขององค์ประกอบ div โดยใช้คุณสมบัติ firstChild ซึ่งจะส่งคืนองค์ประกอบ
ในกรณีของเรา จากนั้นเราได้รับข้อความภายในองค์ประกอบ p โดยใช้คุณสมบัติ innerHTML และกำหนดค่านั้นให้กับตัวแปร ch ค่านี้จะแสดงในย่อหน้าด้วย id “Sample” โดยกำหนดข้อความที่ต้องการโดยใช้คุณสมบัติ innerHTML -
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first child node of the div is :"+list;
} 