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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: ParentNode.children
slug: Web/API/ParentNode/children
translation_of: Web/API/ParentNode/children
---
<p>{{ APIRef("DOM") }}</p>
<p><code><strong>Node.children</strong></code> 唯讀屬性會回傳一個 <code>Node</code> 之子{{domxref("Element","元素")}}的動態（live）{{domxref("HTMLCollection")}}。</p>
<h2 id="語法">語法</h2>
<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre>
<p><code><em>children</em></code> 是一個 {{ domxref("HTMLCollection") }}，為一個有順序性、由 <em><code>node</code></em> 中的 DOM 子元素所組成的集合。假如沒有子元素，則 <code><em>children</em></code> 內便不包含任何元素，且 <code>length</code> 為 <code>0</code>。</p>
<h2 id="範例">範例</h2>
<pre class="brush: js">var foo = document.getElementById('foo');
for (var i = 0; i < foo.children.length; i++) {
console.log(foo.children[i].tagName);
}
</pre>
<h2 id="Polyfill">Polyfill</h2>
<pre class="brush: js">// Overwrites native 'children' prototype.
// Adds Document & DocumentFragment support for IE9 & Safari.
// Returns array instead of HTMLCollection.
;(function(constructor) {
if (constructor &&
constructor.prototype &&
constructor.prototype.children == null) {
Object.defineProperty(constructor.prototype, 'children', {
get: function() {
var i = 0, node, nodes = this.childNodes, children = [];
while (node = nodes[i++]) {
if (node.nodeType === 1) {
children.push(node);
}
}
return children;
}
});
}
})(window.Node || window.Element);
</pre>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support (on {{domxref("Element")}})</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>9.0 [1]</td>
<td>38.0</td>
<td>10.0</td>
<td>4.0</td>
</tr>
<tr>
<td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
<td>29.0</td>
<td>{{CompatGeckoDesktop("25.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>16.0</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Support on {{domxref("SVGElement")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support (on {{domxref("Element")}})</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("25.0")}}</td>
<td>{{CompatNo}}</td>
<td>16.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously includes {{domxref("Comment")}} nodes.</p>
<h2 id="參見">參見</h2>
<ul>
<li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} interfaces.</li>
<li>
<div class="syntaxbox">Object types implementing this interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
</li>
</ul>
|
