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ử nhất định. Kiểu trả về của childElementCount là dài chưa được ký. Nó sẽ chỉ trả về phần tử con của nút mà nó đượ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
Sau đây là cú pháp cho thuộc tính childElementCount -
node.childElementCount
Ví dụ
Hãy để chúng tôi 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>Click the button below to find out the no of children of the div element</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
function childCount() {
var x = document.getElementById("myDIV").childElementCount;
document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}
</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ử
và một tiêu đề
. Chúng tôi cũng đã thêm đường viền màu, lề và phần đệm vào 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>HEADING</h3>
<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 childCount () khi nhấp chuột.
<button onclick="childCount()">COUNT</button>
Phương thức childCount () nhận phần tử có id “myDIV”, trong trường hợp của chúng ta là phần tử
và một phần tử
bên trong , nên childElementCount trả về 3.
Giá trị trả về sau đó được hiển thị trong đoạn có id “Sample” bằng cách sử dụng phương thức innerHTML () trên đoạn văn -
function childCount() {
var x = document.getElementById("myDIV").childElementCount;
document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}
Giá trị trả về sau đó được hiển thị trong đoạn có id “Sample” bằng cách sử dụng phương thức innerHTML () trên đoạn văn -
function childCount() {
var x = document.getElementById("myDIV").childElementCount;
document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}