Thuộc tính HTML DOM childElementCount là thuộc tính chỉ đọc trả về số lượng phần tử con của một phần tử cho trước. Kiểu trả về của childElementCount là unsigned long. Nó sẽ chỉ trả về phần tử con của nút được truy vấn chứ không phải tất cả các nút con của tài liệu HTML.
Cú pháp
Cú pháp sau đây dùng cho thuộc tính childElementCount:
node.childElementCount
Ví dụ
Hãy xem một ví dụ cho thuộc tính HTML DOM childElementCount:
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; margin: 7px; padding-left:20px; } </style> </head> <body> <p>Nhấn nút bên dưới để tìm số lượng con của phần tử div</p> <button onclick="childCount()">ĐẾM</button> <div id="myDIV"> <h3>TIÊU ĐỀ</h3> <p>Phần tử p đầu tiên</p> <p>Phần tử p thứ hai</p> </div> <p id="Sample"></p> <script> function childCount() { var x = document.getElementById("myDIV").childElementCount; document.getElementById("Sample").innerHTML = "Phần tử div có " + x + " 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 "myDIV" và ba phần tử bên trong. Hai phần tử <p> và một tiêu đề <h3>. Chúng ta cũng đã thêm viền có màu, lề và đệm cho div để phân biệt nó với các phần tử khác:
div { border: 2px solid blue; margin: 7px; padding-left:20px; } <div id="myDIV"> <h3>TIÊU ĐỀ</h3> <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 childCount() khi nhấp:
<button onclick="childCount()">ĐẾM</button>
Phương thức childCount() lấy phần tử với id "myDIV", trong trường hợp này là <div>, và gán giá trị thuộc tính childElementCount của nó cho biến x. Vì chúng ta có hai phần tử <p> và một phần tử <h3> bên trong <div>, childElementCount trả về 3.
Giá trị trả về sau đó được hiển thị trong đoạn văn có id "Sample" bằng phương thức innerHTML trên đoạn văn:
function childCount() { var x = document.getElementById("myDIV").childElementCount; document.getElementById("Sample").innerHTML = "Phần tử div có " + x + " con"; }