files/zh-cn/web/api/element/childelementcount/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

---
title: Element.childElementCount
slug: Web/API/Element/childElementCount
translation_of: Web/API/Element/childElementCount
tags:
  - API
  - DOM
  - Property
  - Reference
browser-compat: api.Element.childElementCount
---
<p>{{ APIRef("DOM") }} </p>

<p> <code><strong>Element.childElementCount </strong></code>只读属性返回一个<em><strong>无符号长整型数字</strong></em>，表示给定元素的子元素数。</p>

<div class="note">
<p>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, <code>childElementCount</code> moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
</div>

<p> </p>

<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2>

<pre>var <var>count</var> = <em>node</em>.childElementCount;</pre>

<pre class="eval">var <em>elCount</em> = elementNodeReference.childElementCount;
</pre>

<dl>
 <dt>count</dt>
 <dd>holds the return value an <code>unsigned long </code>(simply an integer) type.</dd>
 <dt>node</dt>
 <dd>is an object representing a <code>Document</code>, <code>DocumentFragment</code> or <code>Element</code>.</dd>
</dl>

<h2 id="例子">例子</h2>

<pre><code>var foo = document.getElementById("foo");
if (foo.childElementCount &gt; 0) {
    // do something
}</code></pre>

<p>下例演示了一个元素节点的<code>childElementCount</code>属性以及<code>children</code>属性的用法.</p>

<pre class="eval">&lt;head&gt;
    &lt;script type="text/javascript"&gt;
        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);
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="container" style="width:300px; background-color:#a0d0e0;"&gt;
        Some text inside the container.
        &lt;input type="text" size="40" value="a child element of the container" /&gt;
        &lt;div&gt;
            &lt;div&gt;a descendant element of the container&lt;/div&gt;
            &lt;div&gt;another descendant element of the container&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;button onclick="GetChildCount ();"&gt;Get the number of container's child elements&lt;/button&gt;
&lt;/body&gt;
</pre>

<div>执行上面的例子:<a class="external" href="http://help.dottoro.com/external/examples/ljsfamht/childElementCount_1.htm">http://help.dottoro.com/external/examples/ljsfamht/childElementCount_1.htm</a></div>

<p> </p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

{{Compat("api.Element.childElementCount")}}

<h2 id="Specification" name="Specification">规范</h2>

<p><a href="http://www.w3.org/TR/2008/WD-ElementTraversal-20080303/#attribute-childElementCount" rel="nofollow">childElementCount (W3C)</a></p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a class="internal" href="/zh-cn/DOM/Element.children" title="zh-cn/DOM/Element.children"><code>children</code></a></li>
 <li><a class="internal" href="/zh-cn/DOM/Element.firstElementChild" title="zh-cn/DOM/Element.firstElementChild"><code>firstElementChild</code></a></li>
 <li><a class="internal" href="/zh-cn/DOM/Element.lastElementChild" title="zh-cn/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li>
 <li><a class="internal" href="/zh-cn/DOM/Element.nextElementSibling" title="zh-cn/DOM/Element.nextElementSibling"><code>nextElementSibling</code></a></li>
 <li><a class="internal" href="/zh-cn/DOM/element.previousElementSibling" title="zh-cn/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
</ul>

<p> </p>