Thuộc tính lastChild trong JavaScript

• Bùi Tấn Lực
• 884
• 12/09/2025

Chức năng của Thuộc tính lastChild trong JavaScript

Thuộc tính lastChild trong JavaScript dùng để lấy nút con cuối cùng của phần tử HTML, nút con bao gồm thẻ HTML, khoảng trắng, chú thích,...

Bạn có thể xem vị trí cuối cùng trong phần tử HTML là cái gì bằng cách alert() ra để xem.

Bạn có thể lấy HTML, giá trị,... của các thẻ HTML nằm ở vị trí cuối cùng.

Bạn có thể hành động lên phần tử con cuối cùng.

Cú pháp của Thuộc tính lastChild trong JavaScript

let ketqua = tenbiencha.lastChild.hanhdong;

tenbiencha: Tên biến cha là phần tử HTML cha cần lấy thông tin phần tử con cuối cùng, thường dùng document.getElementById("giá trị id") để lấy.

hanhdong: Hành động để lấy nội dung hoặc tên thẻ,...

ketqua: Kết quả trả về.

tenbiencha.lastChild.hanhdong;

tenbiencha: Tên biến cha là phần tử HTML cha cần hành động lên phần tử con cuối cùng, thường dùng document.getElementById("giá trị id") để lấy.

hanhdong: Hành động để css hoặc tạo giá trị,...

Code Thuộc tính lastChild trong JavaScript

document.getElementById("ulid").lastChild.style.color = "red";

let valueulhtml = document.getElementById("ulid").lastChild.outerHTML;

<h3>lastChild li cuối cùng</h3>
<ul id="ulid" style="border:1px solid red;padding:20px;margin-bottom:10px"><li>Trang chủ</li><li>Giới thiệu</li><li>Blog</li><li>Liên hệ</li></ul>
<div>Lấy nút con cuối cùng là thẻ ul (HTML): <span id="ulhtml"></span></div>
<h3>lastChild p cuối cùng</h3>
<div id="divp" style="border:1px solid red;padding:20px;margin-bottom:10px"><p>Xin Chào!</p><p>Cảm ơn!</p></div>
<div>Lấy nút con cuối cùng là thẻ p (HTML): <span id="phtml"></span></div>
<h3>lastChild input cuối cùng</h3>
<div id="divinput" style="border:1px solid red;padding:20px;margin-bottom:10px"><input type="text" value="1"><input type="text" value="2"></div>
<div>Lấy nút con cuối cùng là thẻ input(Value): <span id="inputhtml"></span></div>
<h3>Khoảng trắng cuối cùng</h3>
<div id="divkt" style="border:1px solid red;padding:20px;margin-bottom:10px"><input type="text" value="1"><input type="text" value="2"> </div>
<div>Lấy nút con cuối cùng là khoảng trắng(html): <span id="kthtml"></span></div>
<h3>lastChild chú thích cuối cùng</h3>
<div id="divcthich"><p>Xin Chào!</p><!--Chú thích--></div>
<div>Lấy nút con cuối cùng là chú thích (HTML): <span id="cthichhtml"></span></div>
<script>
// lastChild li cuối cùng
let valueulhtml = document.getElementById("ulid").lastChild.outerHTML;
//alert(valueulhtml);
document.getElementById("ulid").lastChild.style.color = "red";
document.getElementById("ulhtml").innerHTML = valueulhtml;
// lastChild p cuối cùng
let valuephtml = document.getElementById("divp").lastChild.innerHTML;
document.getElementById("phtml").innerHTML = valuephtml;
// lastChild input cuối cùng
let inputvalue = document.getElementById("divinput").lastChild.value;
document.getElementById("inputhtml").innerHTML = inputvalue;
// Khoảng trắng cuối cùng
let khoangtrang = document.getElementById("divkt").lastChild.nodeValue;
document.getElementById("kthtml").innerHTML = khoangtrang;
// lastChild chú thích cuối cùng
let chuthichhtml = document.getElementById("divcthich").lastChild.nodeValue;
document.getElementById("cthichhtml").innerHTML = chuthichhtml;
</script>

Chạy Thử

Những Lưu Ý Khi Sử Dụng lastChild Trong JavaScript

Khi sử dụng lastChild, cần nhớ rằng thuộc tính này lấy nút con cuối cùng, không chỉ lấy phần tử HTML cuối cùng. Vì vậy, kết quả có thể là phần tử, nút văn bản hoặc nút chú thích tùy vào cấu trúc bên trong phần tử cha.

lastChild Có Thể Trả Về Khoảng Trắng Hoặc Chú Thích

Một lỗi thường gặp là tưởng rằng lastChild luôn trả về thẻ HTML cuối cùng. Thực tế, khoảng trắng và xuống dòng trong mã HTML cũng có thể được trình duyệt biểu diễn dưới dạng nút văn bản. Nếu phía sau phần tử cuối cùng còn khoảng trắng hoặc chú thích, lastChild có thể trả về nút đó.

<div id="box">
    <p>Nội dung cuối</p>
</div>

Trong ví dụ trên, khoảng xuống dòng sau thẻ p có thể tạo ra một nút văn bản. Vì vậy, kết quả của lastChild không nhất thiết là phần tử p. Đây là lý do cần kiểm tra loại nút trước khi thao tác nếu cấu trúc HTML có nhiều khoảng trắng hoặc chú thích.

Phân Biệt lastChild Và lastElementChild

lastChild xét tất cả các loại nút con, trong khi lastElementChild chỉ quan tâm đến phần tử HTML cuối cùng. Nếu mục tiêu là lấy chính xác thẻ HTML cuối cùng bên trong một phần tử, lastElementChild thường phù hợp hơn.

const box = document.getElementById("box");

const nodeCuoi = box.lastChild;
const phanTuCuoi = box.lastElementChild;

Với cách này, nodeCuoi có thể là nút văn bản hoặc một loại nút khác, còn phanTuCuoi sẽ là phần tử HTML cuối cùng. Chọn đúng thuộc tính ngay từ đầu giúp hạn chế lỗi khi đọc nội dung, thay đổi thuộc tính hoặc thao tác với DOM.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính lastChild trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính lastChild trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp