Thuộc tính HTML DOM children được dùng để trả về tất cả các phần tử con của phần tử được chỉ định dưới dạng một HTML Collection. Đây chỉ là 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 cùng thứ tự 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à chú thích như thuộc tính childNodes.
Cú pháp
Cú pháp sau đây dùng cho thuộc tính children:
element.children
Hãy xem một ví dụ về thuộc tính HTML DOM children:
<!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 số lượng phần tử con div</p> <button onclick="myChild()">ĐẾ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 myChild() { var x = document.getElementById("DIV1").children.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:
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 hàm myChild() khi được nhấp:
<button onclick="myChild()">ĐẾM</button>
Hàm myChild() 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 children.length của nó, gán cho biến x. Điều quan trọng ở đây là thuộc tính children không xem xét khoảng trắng và chú thích nên nó sẽ chỉ xem xét hai phần tử <p> và children.length sẽ trả về 2. Giá trị này sau đó được hiển thị trong đoạn văn có id "Sample" bằng phương thức innerHTML:
function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "Phần tử div có " + x + " nút con"; }