{{ APIRef("DOM") }}
Element.childElementCount 只读属性返回一个无符号长整型数字，表示给定元素的子元素数。
This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, childElementCount moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.
var count = node.childElementCount;
var elCount = elementNodeReference.childElementCount;
unsigned long (simply an integer) type.Document, DocumentFragment or Element.var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
// do something
}下例演示了一个元素节点的childElementCount属性以及children属性的用法.
<head>
<script type="text/javascript">
function GetChildCount () {
var container = document.getElementById ("container");
var childCount = 0;
//如果支持childElementCount属性
if ('childElementCount' in container) {
childCount = container.childElementCount;
}
else {
//如果支持children属性,IE6/7/8
//译者注:没有判断nodeType是否为1,可能包含注释节点.
if (container.children) {
childCount = container.children.length;
}
else { //,如果都不支持,Firefox 3.5之前版本
var child = container.firstChild;
while (child) {
if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
childCount++;
}
child = child.nextSibling;
}
}
}
alert ("The number of child elements is " + childCount);
}
</script>
</head>
<body>
<div id="container" style="width:300px; background-color:#a0d0e0;">
Some text inside the container.
<input type="text" size="40" value="a child element of the container" />
<div>
<div>a descendant element of the container</div>
<div>another descendant element of the container</div>
</div>
</div>
<br /><br />
<button onclick="GetChildCount ();">Get the number of container's child elements</button>
</body>