home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

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

คุณสมบัติ HTML DOM firstElementChild ใช้สำหรับส่งคืนองค์ประกอบลูกแรกขององค์ประกอบที่กำหนด องค์ประกอบลูกถูกส่งกลับเป็นโหนดองค์ประกอบเท่านั้น โดยจะละเว้นโหนดข้อความและความคิดเห็นและไม่พิจารณา นี่เป็นคุณสมบัติแบบอ่านอย่างเดียว

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ HTML DOM firstElementChild -

element.firstElementChild

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติ firstElementChild -

<!DOCTYPE html>
<html>
<head>
<script>
   function eleChild() {
      var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
      document.getElementById("Sample").innerHTML = "The first element child node of the div is :"+ch;
   }
</script>
</body>
</html>
<h1>firstElementChild property</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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

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

เมื่อคลิกวิธี "รับลูก" -

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

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

เราได้สร้างปุ่ม "รับลูก" ที่จะรันเมธอด eleChild() เมื่อผู้ใช้คลิก -

<button onclick="eleChild()">Get Child</button>

ฟังก์ชัน eleChild() รับ firstElementChild ของ div ด้วย id “DIV1” และกำหนดคุณสมบัติ innerHTML ให้กับตัวแปร ch เนื่องจาก firstElementChild ไม่ได้พิจารณาช่องว่าง มันจะส่งคืนองค์ประกอบ

การใช้คุณสมบัติ innerHTML เราได้รับข้อความภายในองค์ประกอบ

และแสดงในย่อหน้าด้วย id “Sample” -

function eleChild() {
   var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
   document.getElementById("Sample").innerHTML = "The first element child node of the div is :"+ch;
}