HTML DOM firstChildคุณสมบัติ
ตัวอย่าง
รับเนื้อหา HTML ของโหนดย่อยแรกขององค์ประกอบ <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ firstChild ส่งคืนโหนดย่อยแรกของโหนดที่ระบุ เป็นอ็อบเจ็กต์โหนด
ความแตกต่างระหว่างคุณสมบัตินี้และ firstElementChildคือ firstChild ส่งคืนโหนดย่อยแรกเป็นโหนดองค์ประกอบ โหนดข้อความ หรือโหนดความคิดเห็น (ขึ้นอยู่กับว่าอันใดอันแรก) ในขณะที่ firstElementChild ส่งคืนโหนดย่อยแรกเป็นโหนดองค์ประกอบ (ละเว้นข้อความ และโหนดความคิดเห็น)
หมายเหตุ:ช่องว่างภายในองค์ประกอบถือเป็นข้อความ และข้อความถือเป็นโหนด (ดู "ตัวอย่างเพิ่มเติม")
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
เคล็ดลับ:ใช้องค์ประกอบ .childNodes คุณสมบัติเพื่อส่งคืนโหนดย่อยของโหนดที่ระบุ childNodes[0] จะให้ผลลัพธ์เช่นเดียวกับ firstChild
เคล็ดลับ:หากต้องการส่งคืนโหนดย่อยสุดท้ายของโหนดที่ระบุ ให้ใช้คุณสมบัติlastChild
รองรับเบราว์เซอร์
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
node.firstChild
รายละเอียดทางเทคนิค
| คืนมูลค่า: | โหนดวัตถุ เป็นตัวแทนของลูกคนแรกของโหนด หรือnullถ้าไม่มีโหนดลูก |
|---|---|
| เวอร์ชัน DOM | วัตถุโหนดหลักระดับ 1 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ในตัวอย่างนี้ เราแสดงให้เห็นว่าช่องว่างอาจรบกวนคุณสมบัตินี้ได้อย่างไร
รับชื่อโหนดของโหนดย่อยแรกของ <div> องค์ประกอบ:
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
ตัวอย่าง
อย่างไรก็ตาม หากเราลบช่องว่างออกจากแหล่งที่มา จะไม่มี #text โหนดใน <div> ซึ่งจะทำให้องค์ประกอบ <p> เป็นโหนดย่อยแรก:
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
ตัวอย่าง
รับข้อความของโหนดย่อยแรกขององค์ประกอบ <select>:
var x = document.getElementById("mySelect").firstChild.text;
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: node.js ทรัพย์สินลูกสุดท้าย
การอ้างอิง HTML DOM: node.js คุณสมบัติโหนดย่อย
การอ้างอิง HTML DOM: node.js คุณสมบัติ parentNode
การอ้างอิง HTML DOM: node.js ต่อไปคุณสมบัติพี่น้อง
การอ้างอิง HTML DOM: node.js ก่อนหน้าคุณสมบัติพี่น้อง
การอ้างอิง HTML DOM: node.js nodeName คุณสมบัติ