ตัวอย่าง
ได้รับเนื้อหา HTML ของโหนดลูกคนแรกของนั้น <ul> องค์ประกอบ:
var x = document.getElementById("myList").firstChild.innerHTML;ผลของ x จะเป็น:
Coffee ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
สถานที่ให้บริการ firstChild กลับโหนดลูกคนแรกของโหนดที่ระบุไว้เป็นวัตถุโหนด
ความแตกต่างระหว่างคุณสมบัตินี้และ firstElementChild เป็นที่ firstChild กลับโหนดลูกคนแรกเป็นโหนดองค์ประกอบโหนดข้อความหรือความคิดเห็นโหนด (depending on which one's first) ในขณะที่ firstElementChild กลับโหนดลูกคนแรกเป็นโหนดองค์ประกอบ (ignores text and comment nodes)
หมายเหตุ: ช่องว่างภายในองค์ประกอบถือว่าเป็นข้อความและข้อความถือเป็นโหนด (See "More Examples")
สถานที่แห่งนี้เป็นอ่านอย่างเดียว
เคล็ดลับ: ใช้ องค์ประกอบ .childNodes คุณสมบัติที่จะกลับโหนดเด็ก ๆ ของโหนดที่ระบุ childNodes [0] จะผลิตผลเช่นเดียวกับ firstChild
เคล็ดลับ: หากต้องการกลับโหนดเด็กสุดท้ายของโหนดที่ระบุให้ใช้ lastChild คุณสมบัติ
สนับสนุนเบราว์เซอร์
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| firstChild | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
วากยสัมพันธ์
node .firstChildรายละเอียดทางเทคนิค
| กลับค่า: | วัตถุโหนดเป็นตัวแทนของลูกคนแรกของโหนดหรือ null ถ้าไม่มีโหนดลูก |
|---|---|
| DOM รุ่น | ระดับแกนวัตถุ 1 โหนด |
ตัวอย่างอื่น ๆ
ตัวอย่าง
ในตัวอย่างนี้เราแสดงให้เห็นว่าช่องว่างอาจ interfare กับคุณสมบัตินี้
ได้รับชื่อโหนดของโหนดลูกคนแรกของ <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>ผลของ x จะเป็น:
#text ลองตัวเอง» ตัวอย่าง
แต่ถ้าเราลบช่องว่างจากแหล่งที่ไม่มีโหนด #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>ผลของ x จะเป็น:
P ลองตัวเอง» ตัวอย่าง
ได้รับข้อความของโหนดลูกคนแรกของที่ <select> องค์ประกอบ:
var x = document.getElementById("mySelect").firstChild.text;ผลของ x จะเป็น:
Audi ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
อ้างอิง HTML DOM: โหนด lastChild ทรัพย์สิน
อ้างอิง HTML DOM: โหนด childNodes ทรัพย์สิน
อ้างอิง HTML DOM: โหนด parentNode ทรัพย์สิน
อ้างอิง HTML DOM: โหนด nextSibling ทรัพย์สิน
อ้างอิง HTML DOM: โหนด previousSibling ทรัพย์สิน
อ้างอิง HTML DOM: โหนด nodeName ทรัพย์สิน