ParentNode.childElementCount 只读属性返回一个无符号长,表示给定元素的子元素数。

This property was initially defined in the ElementTraversal pure interface. As this interface contained two distinct set of properties, one aimed at Node that have children, one at those that are children, they have been moved into two separate pure interfaces, ParentNode and ChildNode. In this case, childElementCount moved to ParentNode. This is a fairly technical change that shouldn't affect compatibility.

 

语法

var count = node.childElementCount;
var elCount = elementNodeReference.childElementCount; 
count
holds the return value an unsigned long (simply an integer) type.
node
is an object representing a DocumentDocumentFragment 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>

 

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support Unknown (3) (Yes) 9.0 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

规范

childElementCount (W3C)

相关链接

 

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, teoli, AlexChao, ziyunfei
 最后编辑者: xgqfrms-GitHub,