คุณสมบัติHTML DOM LastChild
ตัวอย่าง
รับเนื้อหา HTML ของโหนดย่อยสุดท้ายขององค์ประกอบ <ul>:
var x = document.getElementById("myList").lastChild.innerHTML;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติlastChildส่งคืนโหนดย่อยสุดท้ายของโหนดที่ระบุ เป็นอ็อบเจ็กต์โหนด
ความแตกต่างระหว่างคุณสมบัตินี้และ lastElementChildคือ lastChild ส่งคืนโหนดย่อยสุดท้ายเป็นโหนดองค์ประกอบ โหนดข้อความ หรือโหนดความคิดเห็น (ขึ้นอยู่กับว่าอันใดอันสุดท้าย) ในขณะที่ lastElementChild ส่งคืนโหนดย่อยสุดท้ายเป็นโหนดองค์ประกอบ (ละเว้นข้อความ และโหนดความคิดเห็น)
หมายเหตุ:ช่องว่างภายในองค์ประกอบถือเป็นข้อความ และข้อความถือเป็นโหนด (ดู "ตัวอย่างเพิ่มเติม")
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
เคล็ดลับ:ใช้องค์ประกอบ .childNodes คุณสมบัติเพื่อส่งคืนโหนดย่อยของโหนดที่ระบุ
เคล็ดลับ:หากต้องการส่งคืนโหนดชายน์แรกของโหนดที่ระบุ ให้ใช้คุณสมบัติfirstChild
รองรับเบราว์เซอร์
Property | |||||
---|---|---|---|---|---|
lastChild | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
node.lastChild
รายละเอียดทางเทคนิค
คืนมูลค่า: | โหนดวัตถุ เป็นตัวแทนของลูกสุดท้ายของโหนด หรือ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 last child node of <div> is a #text node, and not the <span> 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").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
ตัวอย่าง
อย่างไรก็ตาม หากเราลบช่องว่างออกจากแหล่งที่มา จะไม่มี #text โหนดใน <div> ซึ่งจะทำให้องค์ประกอบ <span> เป็นโหนดย่อยสุดท้าย:
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
ตัวอย่าง
รับข้อความของโหนดย่อยสุดท้ายขององค์ประกอบ <select>:
var x = document.getElementById("mySelect").lastChild.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 คุณสมบัติ