Thuộc tính HTML DOM childNodes

Thuộc tính HTML DOM childNodes trả về một tập hợp các nút con của nút dưới dạng đối tượng NodeList. Các nút được sắp xếp và theo cùng thứ tự như chúng xuất hiện trong tài liệu HTML. Các nút này có thể được truy cập bằng số chỉ mục bắt đầu từ 0. Đây là thuộc tính chỉ đọc. Hãy nhớ rằng, khoảng trắng và chú thích cũng được coi là nút.

Cú pháp

Cú pháp sau đây dùng cho thuộc tính childNodes:

elementNodeReference.childNodes;

Ví dụ

Hãy xem một ví dụ cho thuộc tính HTML DOM childNodes:

<!DOCTYPE html> <html> <head> <style> div { border: 1px solid blue; margin: 7px; } </style> </head> <body> <p>Nhấn nút bên dưới để tìm childnodes của phần tử div.</p> <button onclick="countNodes()">ĐẾM</button> <div id="DIV1"> <p>Phần tử p đầu tiên</p> <p>Phần tử p thứ hai</p> </div> <p id="Sample"></p> <script> function countNodes() { var x = document.getElementById("DIV1").childNodes.length; document.getElementById("Sample").innerHTML = "Phần tử div có " + x + " nút con"; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút ĐẾM:

Trong ví dụ trên:

Chúng ta đã tạo một phần tử <div> với id "DIV1" và nó có hai đoạn văn bên trong. Chúng ta đã thêm viền màu và lề để phân biệt nó với các phần tử khác. Điều quan trọng ở đây là có ba phím Enter được nhấn để đưa mỗi phần tử lên dòng riêng biệt, tạo tổng cộng ba khoảng trắng trong thẻ <div> của chúng ta.

div { border: 1px solid blue; margin: 7px; } <div id="DIV1"> <p>Phần tử p đầu tiên</p> <p>Phần tử p thứ hai</p> </div>

Chúng ta đã tạo nút ĐẾM sẽ thực thi phương thức countNodes() khi được nhấp:

<button onclick="countNodes()">ĐẾM</button>

Hàm countNodes() lấy phần tử có id bằng "DIV1" (trong trường hợp này là phần tử <div>) và lấy giá trị thuộc tính childnodes.length của nó, gán cho biến x.

Vì có ba khoảng trắng và hai phần tử <p> bên trong thẻ <div>, childnodes.length trả về 5. Giá trị trả về sau đó được hiển thị trong đoạn văn có id "Sample" bằng phương thức innerHTML:

function countNodes() { var x = document.getElementById("DIV1").childNodes.length; document.getElementById("Sample").innerHTML = "Phần tử div có " + x + " nút con"; }