Thuộc tính lastChild của phần tử HTML DOM

Định nghĩa và cách sử dụng

lastChild Thuộc tính trả về nút con cuối cùng của nút được chỉ định dưới dạng đối tượng Node.

lastChild Thuộc tính này là chỉ đọc.

Lưu ý

lastChild Trả về các nút con này: các nút phần tử, nút văn bản hoặc nút chú thích.

Các khoảng trống giữa các phần tử cũng là các nút văn bản.

Giải pháp thay thế:

Thuộc tính lastElementChild - lastElementChild Thuộc tính trả về phần tử con cuối cùng (bỏ qua các nút văn bản và chú thích).

Xin xem thêm:

Thuộc tính childNodes

Thuộc tính firstChild

Thuộc tính nextSibling

Thuộc tính previousSibling

Thuộc tính nút

Thuộc tính parentNode

Thuộc tính nodeName

Thuộc tính nodeType

Thuộc tính nodeValue

Nút HTML và phần tử

Trong HTML DOMTrong (Document Object Model), tài liệu HTML là tập hợp các nút có (hoặc không có) các nút con.

NútChỉ là các nút phần tử, nút văn bản và nút chú thích.

Phần tửCác khoảng trống giữa chúng cũng là các nút văn bản.

Còn phần tử chỉ là nút phần tử.

Các nút con và các phần tử con

childNodes Trả vềCon nút（các nút phần tử, nút văn bản và nút chú thích）。

children Trả vềCon phần tử（không phải các nút văn bản và chú thích）。

firstChild và firstElementChild

firstChild Trả về phần tử đầu tiênCon nút（Nút phần tử, nút văn bản hoặc nút chú thích）. Khoảng trống giữa các phần tử cũng là nút văn bản.

firstElementChild Trả về phần tử đầu tiênCon phần tử（Không trả về các nút văn bản và nút chú thích）.

lastChild và lastElementChild

lastChild Trả về cuối cùngCon nút（Nút phần tử, nút văn bản hoặc nút chú thích）. Khoảng trống giữa các phần tử cũng là nút văn bản.

lastElementChild Trả về cuối cùngCon phần tử（Không trả về các nút văn bản và nút chú thích）.

Mẫu

Ví dụ 1

Trả về nội dung HTML của nút con cuối cùng của phần tử <ul>:

document.getElementById("myList").lastChild.innerHTML;

Thử ngay

Ví dụ 2

Lấy văn bản của nút con cuối cùng của phần tử <select>:

let text = document.getElementById("mySelect").lastChild.text;

Thử ngay

Ví dụ 3

Ví dụ này minh họa về sự can thiệp của khoảng trống, thử lấy tên nút của nút con cuối cùng của "myDIV":

<div id="myDIV">
  <p>Đ这似乎 là con đầu tiên</p>
  <p>Đ这似乎 là con cuối cùng</p>
</div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

Thử ngay

Ví dụ 4

Nhưng, nếu bạn xóa khoảng trống từ nguồn, thì không có nút #text trong "myDIV":

<div id="myDIV"><p>Con đầu tiên</p><p>Con cuối cùng</p></div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

Thử ngay

Cú pháp

element.lastChild

hoặc

node.lastChild

Trả về giá trị

Loại Mô tả
Nút Nút con cuối cùng của nút.
null Nếu không có con.

Hỗ trợ trình duyệt

element.lastChild Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ