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

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

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

  • Trong trường hợp muốn lấy Node con cuối cùng của một Node chỉ định mà Node con đó phải là một Element Node, hãy dùng tới thuộc tính lastElementChild để thay thế.

lastChild trong JavaScript là gì

lastChild trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy Node con trực tiếp cuối cùng của một Node chỉ định. Thuộc tính này đối lập với thuộc tính firstChild vốn dùng để lấy Node con trực tiếp đầu tiên của một Node chỉ định.

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 lastChild trong JavaScript như sau:

node.lastChild

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

Node Object là đối tượng để xử lý Node trong JavaScript. Trong Node 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ý Node, ví dụ như là thuộc tính nodeName để lấy tên Node chẳng hạn.

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

let element = document.getElementById('main');
console.log(element.lastChild.nodeName);

Mã mẫu

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

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng lastChild</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 Node con bằng lastChild</button>

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

Trong mã HTML ở trên, sau khi click vào nút thì tên Node con cuối cùng (tương ứng với Node trống #text) sẽ được in ra như sau:
lastChild trong JavaScript

Ở ví dụ này, mặc dù chúng ta chỉ nhìn thấy trực quan chỉ có 2 node con với tagname là p trong Node cha có id="box", tuy nhiên do trong HTML sẽ đếm cả các Node trống nên thực tế sẽ có 5 Node được liệt kê trong kết quả ở trên, bao gồm:

  1. Node trống #text
  2. Node p của <p>Ninh Bình</p>
  3. Node trống #text
  4. Node p của <p>Shop mẹ và bé</p>
  5. Node trống #text

Do vậy, Node con cuối cùng là Node trống đã được in ra như kết quả.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng lastChild trong JavaScript để lấy Node 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.