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
|
---
title: ParentNode.firstElementChild
slug: orphaned/Web/API/ParentNode/firstElementChild
tags:
- API
- DOM
- ParentNode
- Property
- Reference
translation_of: Web/API/ParentNode/firstElementChild
original_slug: Web/API/ParentNode/firstElementChild
---
<p>{{ APIRef("DOM") }}</p>
<p>Доступное только для чтения свойство <strong><code>ParentNode.firstElementChild</code></strong> возвращает первый дочерний элемент объекта ({{domxref("Element")}}) или <code>null</code> если дочерних элементов нет.</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("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>firstElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
</div>
<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild;
</pre>
<h2 id="Example" name="Example">Пример</h2>
<pre class="brush: html"><p id="para-01">
<span>First span</span>
</p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstElementChild.nodeName)
</script></pre>
<p>В этом примере alert показывает 'span', что является именем тега первого дочернего узла элемента p.</p>
<h2 id="Polyfill_для_Internet_Explorer_8">Polyfill для Internet Explorer 8</h2>
<p>Это свойство не поддерживается браузером Internet Explorer вплоть до 9 версии, поэтому следующий сниппет может быть использован для добавления поддержки IE8:</p>
<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("firstElementChild" in document.documentElement)){
Object.defineProperty(Element.prototype, "firstElementChild", {
get: function(){
for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
if(n = nodes[i], 1 === n.nodeType) return n;
return null;
}
});
}</pre>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
</tr>
<tr>
<td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
<td>{{Spec2('Element Traversal')}}</td>
<td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</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>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка ({{domxref("Element")}})</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>9.0</td>
<td>10.0</td>
<td>4.0</td>
</tr>
<tr>
<td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
<td>29.0</td>
<td>{{CompatGeckoDesktop("25.0")}}</td>
<td>{{CompatNo}}</td>
<td>16.0</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>Базовая поддержка ({{domxref("Element")}})</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td>Поддержка {{domxref("Document")}} и {{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>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref("ParentNode")}} и {{domxref("ChildNode")}}.</li>
<li>
<div class="syntaxbox">Типы объектов, имплементирующие данное свойство: {{domxref("Document")}}, {{domxref("Element")}}, и {{domxref("DocumentFragment")}}.</div>
</li>
</ul>
|
