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ạng đối tượng NodeList. Các nút được sắp xếp và theo thứ tự giống 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. Nó là thuộc tính chỉ đọc. Hãy nhớ rằng, các khoảng trắng và chú thích cũng được coi là các nút.
Cú pháp
Sau đây là cú pháp cho thuộc tính childNodes -
elementNodeReference.childNodes;
Ví dụ
Hãy để chúng tôi xem một ví dụ cho thuộc tính HTML DOM conNodes -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>Click the button below to find the div element childnodes.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút COUNT -
Trong ví dụ trên -
Chúng tôi đã tạo một phần tử
div {
border: 1px solid blue;
margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div> Sau đó, chúng tôi đã tạo một nút COUNT sẽ thực thi phương thức countNodes () khi người dùng nhấp vào.
<button onclick="countNodes()">COUNT</button>
Hàm countNodes () nhận phần tử có id bằng “DIV1”, trong trường hợp của chúng ta là phần tử
Vì có ba khoảng trắng và hai phần tử
bên trong thẻ
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}