Thuộc tính lastElementChild trong JavaScript
Bùi Tấn Lực - 907
- 12/09/2025
Chức năng của Thuộc tính lastElementChild trong JavaScript
Thuộc tính lastElementChild trong JavaScript dùng để lấy nội dung chữ, html, giá trị,... hoặc tác động lên phần tử con cuối cùng nằm trong thẻ HTML cha, thuộc tính này không lấy khoảng trắng và chú thích.
Cú pháp của Thuộc tính lastElementChild trong JavaScript
let ketqua = tenbiencha.lastElementChild.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 hoặc dùng 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 để lấy thông tin.
ketqua: Kết quả trả về
tenbiencha.lastElementChild.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 hoặc dùng 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 tác động lên phần tử con cuối cùng.
Code Thuộc tính lastElementChild trong JavaScript
document.getElementById("ulid").lastElementChild.style.color = "red";
let selecthtml = document.getElementById("selectid").lastElementChild.value;
<h3>lastElementChild li cuối cùng</h3>
<ul id="ulid">
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Blog</li>
<li>Liên hệ</li>
</ul>
<div>Phần tử HTML cuối cùng của thẻ ul (HTML): <span id="ulhtml"></span>, Loại thẻ: <span id="ulloaithe"></span></div>
<h3>lastElementChild option trong select cuối cùng</h3>
<select id="selectid">
<option value="Trang chủ" >Trang chủ</option>
<option value="Giới thiệu" >Giới thiệu</option>
<option value="Blog" >Blog</option>
<option value="Liên hệ" >Liên hệ</option>
</select>
<div>Phần tử HTML cuối cùng của thẻ select (HTML): <span id="selecthtml"></span></div>
<h3>lastElementChild p cuối cùng</h3>
<div id="divp">
<!--lastElementChild p cuối cùng-->
<p>Xin Chào!</p>
<p>Cảm ơn!</p>
</div>
<div>Phần tử HTML cuối cùng là thẻ p (HTML): <span id="phtml"></span></div>
<h3>lastElementChild input cuối cùng</h3>
<div id="divinput">
<input type="text" value="1">
<input type="text" value="2">
</div>
<div>Phần tử HTML cuối cùng là thẻ input(Value): <span id="inputhtml"></span></div>
<script>
// lastElementChild li cuối cùng
let valueulhtml = document.getElementById("ulid").lastElementChild.innerHTML;
document.getElementById("ulhtml").innerHTML = valueulhtml;
let loaithehtml = document.getElementById("ulid").lastElementChild.tagName;
document.getElementById("ulloaithe").innerHTML = loaithehtml;
document.getElementById("ulid").lastElementChild.style.fontSize = "40px";
document.getElementById("ulid").lastElementChild.style.color = "red";
// lastElementChild option trong thẻ select cuối cùng
let selecthtml = document.getElementById("selectid").lastElementChild.value;
document.getElementById("selecthtml").innerHTML = selecthtml;
// lastElementChild p cuối cùng
let valuephtml = document.getElementById("divp").lastElementChild.innerHTML;
document.getElementById("phtml").innerHTML = valuephtml;
// lastElementChild input cuối cùng
let inputvalue = document.getElementById("divinput").lastElementChild.value;
document.getElementById("inputhtml").innerHTML = inputvalue;
</script>
Những điểm cần lưu ý khi dùng lastElementChild
Khi làm việc với cấu trúc DOM, lastElementChild khá thuận tiện để lấy phần tử HTML nằm cuối cùng bên trong một phần tử cha. Tuy nhiên, kết quả có thể khác với những thuộc tính như lastChild hoặc children. Hiểu rõ sự khác biệt sẽ giúp tránh lỗi khi xử lý nội dung động trên trang.
lastElementChild khác gì lastChild?
lastElementChild chỉ tìm phần tử HTML cuối cùng, còn lastChild lấy node cuối cùng trong DOM. Vì vậy, lastChild có thể trả về một node văn bản, chẳng hạn khoảng trắng hoặc ký tự xuống dòng được tạo ra từ mã HTML.
Ví dụ, với cấu trúc có khoảng trắng giữa các phần tử, lastChild có thể không trả về phần tử mà bạn đang mong muốn. Trong khi đó, lastElementChild bỏ qua các node không phải phần tử và chọn đúng phần tử HTML cuối cùng.
<div id="box">
<p>Nội dung thứ nhất</p>
<p>Nội dung thứ hai</p>
</div>
const box = document.getElementById("box");
console.log(box.lastChild);
console.log(box.lastElementChild);
Trong trường hợp này, lastElementChild phù hợp hơn khi mục tiêu là thao tác trực tiếp với phần tử HTML cuối cùng. Nếu cần làm việc với mọi loại node trong DOM, lastChild mới là lựa chọn phù hợp.
lastElementChild trả về gì khi phần tử cha không có phần tử con?
Nếu phần tử cha không chứa bất kỳ phần tử HTML nào, lastElementChild sẽ trả về null. Đây là tình huống cần lưu ý khi phần tử được tạo động hoặc nội dung bên trong có thể thay đổi trong quá trình chạy JavaScript.
<div id="box"></div>
const box = document.getElementById("box");
console.log(box.lastElementChild);
Kết quả là null. Vì vậy, không nên gọi ngay các thuộc tính hoặc phương thức của phần tử nhận được mà chưa kiểm tra kết quả. Nếu không, chương trình có thể phát sinh lỗi khi cố truy cập vào một giá trị không tồn tại.
const lastItem = box.lastElementChild;
if (lastItem) {
lastItem.textContent = "Nội dung mới";
}
Cách kiểm tra này đặc biệt hữu ích với danh sách, bảng hoặc các khu vực mà nội dung được thêm và xóa bằng JavaScript.
Khi nào nên dùng lastElementChild thay cho children?
Hai thuộc tính đều chỉ làm việc với các phần tử HTML, nhưng mục đích sử dụng khác nhau. lastElementChild thích hợp khi bạn chỉ cần lấy ngay phần tử cuối cùng. Trong khi đó, children phù hợp khi cần duyệt, đếm hoặc truy cập nhiều phần tử con.
const box = document.getElementById("box");
const lastItem = box.lastElementChild;
const allItems = box.children;
console.log(lastItem);
console.log(allItems);
Nếu bài toán chỉ yêu cầu thay đổi phần tử cuối, sử dụng lastElementChild sẽ trực tiếp và dễ đọc hơn. Ngược lại, khi cần kiểm tra toàn bộ danh sách phần tử con, children sẽ phù hợp hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính lastElementChild trong JavaScript.
- 0 Bình luận
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 *
