firstChild trong JavaScript và cách lấy Node con đầu tiên | Laptrinhcanban.com

HOME › >>

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

Hướng dẫn cách sử dụng firstChild trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính firstChild để lấy Node con trực tiếp đầu tiên 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 đầu tiên 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 firstElementChild để thay thế.

firstChild trong JavaScript là gì

firstChild 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 đầu tiên của một Node chỉ định. Thuộc tính này đối lập với thuộc tính lastChild vốn dùng để lấy Node con trực tiếp cuối cùng 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 firstChild trong JavaScript như sau:

node.firstChild

Thuộc tính firstChild có tác dụng tham chiếu đến Node con trực tiếp đầu tiên, 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 đầu tiên 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 đầu tiên 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.firstChild.nodeName);

Mã mẫu

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

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

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

Trong mã HTML ở trên, sau khi click vào nút thì tên Node con đầu tiên (tương ứng với Node trống #text) sẽ được in ra như sau:
firstChild 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 đầu tiên 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 firstChild trong JavaScript để lấy Node 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.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/firstchild-trong-javascript/

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.