คุณสมบัติ firstElementChild ใน HTML DOM

คุณสมบัติ firstElementChild ใน HTML DOM ใช้สำหรับคืนค่าองค์ประกอบลูก (child element) แรกขององค์ประกอบที่ระบุ คืนค่าเป็น element node เท่านั้น ไม่นับ text node และ comment node เป็นคุณสมบัติแบบอ่านอย่างเดียว (read-only)

ไวยากรณ์ (Syntax)

element.firstElementChild

ตัวอย่าง

ตัวอย่างการดึงองค์ประกอบลูกแรกของ div:

<!DOCTYPE html>
<html>
<head>
<script>
  function eleChild() {
    var childHTML = document.getElementById("DIV1").firstElementChild.innerHTML;
    document.getElementById("Sample").innerHTML = "องค์ประกอบลูกแรกของ div คือ: " + childHTML;
  }
</script>
</head>
<body>
<h1>คุณสมบัติ firstElementChild</h1>
<div id="DIV1">
  <p>This is a p element</p>
  <span>This is a span element</span>
</div>
<button onclick="eleChild()">Get Child</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

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

เมื่อคลิก "Get Child" จะแสดง "องค์ประกอบลูกแรกของ div คือ: This is a p element"

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

• สร้าง <div id="DIV1"> มี <p> และ <span> ภายใน
• สร้างปุ่ม "Get Child" เรียกใช้ eleChild() เมื่อคลิก
• ฟังก์ชัน eleChild() ใช้ firstElementChild ของ div ได้ <p> (ไม่นับ whitespace)
• อ่าน innerHTML ของ p แล้วแสดงในย่อหน้า id="Sample"
• ต่างจาก firstChild ที่นับ text node (whitespace) ด้วย