HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

firstElementChild trong JavaScript và cách lấy Element con đầu tiên

21 tháng 6 ,2022

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

firstElementChild trong JavaScript là gì

firstElementChild trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy Element con đầu tiên của một Node chỉ định. Ở đây Element là một loại Node, và thuộc tính firstElementChild chỉ có tác dụng lấy Element Node đầu tiên từ trong các Node con. Trong trường hợp muốn lấy Node con đầu tiên 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 firstChild để 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 firstElementChild trong JavaScript như sau:

node.firstElementChild

Thuộc tính firstElementChild có tác dụng tham chiếu đến Element con trực tiếp đầu tiên, 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 đầu tiên 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 đầu tiên 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 efirst = element.firstElementChild;
console.log(efirst.textContent);

Sự khác biệt giữa firstChild và firstElementChild 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 firstChild và firstElementChild đều có tác dụng lấy Node con trực tiếp đầu tiên từ một Node cha trong JavaScript. Tuy nhiên, kết quả của firstChild sẽ là Node con đầu tiên được tìm thấy, trong khi đó kết quả của firstElementChild 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 firstChild trả về Node Object thì firstElementChild 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 firstChild và firstElementChild trong JavaScript dưới đây:

Tên thuộc tính	Tác dụng	Kết quả trả về
firstChild	Lấy Node con đầu tiên	Node Object
firstElementChild	Lấy Node con đầu tiên và Node đó phải là Element	Element 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:

Sự khác biệt giữa DOM, Node và Element trong JavaScript

Mã mẫu

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

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng firstElementChild</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 đầu tiên bằng firstElementChild</button>

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

Trong mã HTML ở trên, sau khi click vào nút thì Element con đầu tiên <p>Ninh Bình</p> cũng như giá trị thuộc tính textContent của nó sẽ được in ra như sau:
.

Khác với thuộc tính firstChild vốn lấy Node con đầu tiên (Node trống #text trong ví dụ) thì thuộc tính firstElementChild sẽ bỏ qua Node trống này vì nó không phải là Element, và sau đó mới lấy ra Element đầu tiên là <p>Ninh Bình</p> như trên.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng firstElementChild trong JavaScript để lấy Element con trực tiếp đầu tiên 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.