lastElementChild trong JavaScript và cách lấy Element con cuối cùng | Laptrinhcanban.com

lastElementChild trong JavaScript và cách lấy Element con cuối cùng

Hướng dẫn cách sử dụng lastElementChild trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính lastElementChild để lấy Element con cuối cùng của một Node chỉ định sau bài học này.

lastElementChild trong JavaScript là gì

lastElementChild trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy Element con cuối cùng của một Node chỉ định. Ở đây Element là một loại Node, và thuộc tính lastElementChild chỉ có tác dụng lấy Element Node cuối cùng từ trong các Node con. Trong trường hợp muốn lấy Node con cuối cùng mà không yêu cầu Node đó cần phải là Element hay không, hãy dùng thuộc tính childNodes để thay thế.

Node chỉ định có thể được lấy thông qua các phương thức như getElementById hoặc querySelector mà chúng ta đã học trong các bài trước.

Cú pháp sử dụng thuộc tính lastElementChild trong JavaScript như sau:

node.lastElementChild

Thuộc tính lastElementChild có tác dụng tham chiếu đến Element con trực tiếp cuối cùng, và một Element Object chứa Element con này sẽ được trả về. Trong trường hợp không tìm thấy Element con trực tiếp cuối cùng thì giá trị null sẽ được trả về.

Element Object là đối tượng để xử lý Element trong JavaScript. Trong Element Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý Element, ví dụ như là thuộc tính textContent để lấy nội dung text chẳng hạn.

Ví dụ cụ thể, chúng ta lấy Element con trực tiếp cuối cùng của Node cha có id bằng main và xử lý Element Object được trả về như sau:

let element = document.getElementById('main');
let elast = element.lastElementChild;
console.log(elast.textContent);

Sự khác biệt giữa lastChild và lastElementChild trong JavaScript

Trước hết, bạn cần biết sự khác nhau giữa một Node và một Element. Một cách tổng quát thì Node là đơn vị cấu tạo nên cây DOM, và Element là một trong số các kiểu Node. Ngoài Element ra thì document type, comment, text nodes, xuống hàng, dấu cách v.v.. đều là Node trong JavaScript.

Trở lại vấn đề chính thì cả hai thuộc tính lastChild và lastElementChild đều có tác dụng lấy Node con trực tiếp cuối cùng từ một Node cha trong JavaScript. Tuy nhiên, kết quả của lastChild sẽ là Node con cuối cùng được tìm thấy, trong khi đó kết quả của lastElementChild cần có thêm yêu cầu là Node con đó cần phải là một Element.

Ngoài ra, định dạng kết quả trả về của hai thuộc tính này cũng khác nhau, trong khi lastChild trả về Node Object thì lastElementChild sẽ trả về một Element Object.

Hãy cũng xem lại bảng so sánh sự khác biệt giữa lastChild và lastElementChild trong JavaScript dưới đây:

Tên thuộc tínhTác dụngKết quả trả về
lastChildLấy Node con cuối cùngNode Object
lastElementChildLấy Node con cuối cùng và Node đó phải là ElementElement Object

Bạn cũng có thể tìm hiểu thêm sự khác biệt giữa Node và Element trong bài viết dưới đây:

Mã mẫu

Hãy cùng tìm hiểu cách lấy các Element con trực tiếp cuối cùng của Node cha chỉ định bằng thuộc tính lastElementChild trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng lastElementChild</title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy Element con cuối cùng bằng lastElementChild</button>

<script>
function getElements(){
let element = document.getElementById('box');
let lastElementChild = element.lastElementChild;
console.log(lastElementChild.textContent);
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì Element con cuối cùng <p>Shop mẹ và bé</p> cũng như giá trị thuộc tính textContent của nó sẽ được in ra như sau:
lastElementChild trong JavaScript.

Khác với thuộc tính lastChild vốn lấy Node con cuối cùng (Node trống #text trong ví dụ) thì thuộc tính lastElementChild sẽ bỏ qua Node trống này vì nó không phải là Element, và sau đó mới lấy ra Element cuối cùng là <p>Shop mẹ và bé</p> như trên.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng lastElementChild trong JavaScript để lấy Element con trực tiếp cuối cùng của một Node cha rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.