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

Posted on by mtoplistChuyên mục:Top List

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:


<
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/

mtoplist