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

childNodes trong JavaScript và cách lấy các Node con

20 tháng 6 ,2022

Hướng dẫn cách sử dụng childNodes trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính childNodes để lấy các Node con trực tiếp 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 trực tiếp của một Node chỉ định mà các Node con đó phải là một Element Node, hãy dùng tới thuộc tính children để thay thế.

childNodes trong JavaScript là gì

childNodes trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy toàn bộ các Node con trực tiếp của một Node chỉ định. Thuộc tính này đối lập với thuộc tính parentNode vốn dùng để lấy Node cha trực tiếp 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 childNodes trong JavaScript như sau:

node.childNodes

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

NodeList Object là một tập hợp của các Node trong JavaScript. Trong NodeList 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ý tập hợp Node, ví dụ như là thuộc tính length để tìm số phần tử, hay phương thức item để lấy element từ index của nó chẳng hạn.

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

let element = document.getElementById('main');
let children = element.childNodes;

// Lấy số Node con trực tiếp tìm thấy
let len = children.length;

// Truy cập Node con trực tiếp thông qua index của nó
let element = children.item(1);

// Truy cập Node con trực tiếp thông qua index của nó
let element = children[1];

Trong trường hợp nhiều Node con được tìm thấy, chúng sẽ được phân biệt thông qua index của chúng bên trong HTML. Giá trị index này bắt đầu từ 0 và sẽ tăng dần 1 đơn vị (0, 1, 2, 3, 4 …).

Mã mẫu

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

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

<script>
function getElements(){
    let element = document.getElementById('box');
    let children = element.childNodes;

    let len = children.length;
    console.log("Số node con:" + len);

    for (let i = 0; i < len; i++){
        console.log('Tên Node: '+children.item(i).nodeName);
    }
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nut thì số node con cũng như tên của từng node sẽ được in ra như sau:

Ở 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:

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

Các Node này cũng được liệt kê trong kết quả cuối cùng và trở thành 5 Node như trên.

Tổng kết

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