Thuộc tính HTML con DOM được sử dụng để trả về tất cả các phần tử con của phần tử được chỉ định ở dạng tập hợp HTML. Nó chỉ là một thuộc tính chỉ đọc. Các phần tử thu được sau đó có thể được truy cập bằng cách sử dụng các số chỉ mục bắt đầu từ 0.
Các phần tử xuất hiện theo thứ tự giống như trong tài liệu HTML. Nó chỉ chứa các nút con và không bao gồm khoảng trắng và các nhận xét như thuộc tính childNodes.
Cú pháp
Sau đây là cú pháp cho thuộc tính children -
element.children
Hãy để chúng tôi xem một ví dụ về thuộc tính HTML con DOM -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>Click the button below to find out the number of div element children</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element </p>
</div>
<p id="Sample"></p>
<script>
function myChild() {
var x = document.getElementById("DIV1").children.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ử có id “DIV1” và nó có hai đoạn bên trong. Chúng tôi đã thêm một đường viền màu và một số lề để phân biệt nó với các phần tử khác -
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 hàm myChild () khi người dùng nhấp vào -
<button onclick="myChild()">COUNT</button>
Hàm myChild () 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ác phần tử children.length sẽ trả về 2. Giá trị này sau đó được hiển thị trong đoạn có id “Sample” bằng cách sử dụng innerHTML ( ) phương pháp -
function myChild() {
var x = document.getElementById("DIV1").children.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}