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
|
---
title: NonDocumentTypeChildNode.nextElementSibling
slug: Web/API/Element/nextElementSibling
translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling
original_slug: Web/API/NonDocumentTypeChildNode/nextElementSibling
---
<div>{{APIRef("DOM")}}</div>
<p><code><strong>NonDocumentTypeChildNode.nextElementSibling</strong></code> свойство только для чтения, возвращающее последующий элемент перед текущим, или <code>null</code>, если элемент является последним в своём родительском узле.</p>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox">var <em>nextNode</em> = elementNodeReference.nextElementSibling; </pre>
<h2 id="Example">Пример</h2>
<pre class="brush: html"><div id="div-01">Это div-01</div>
<div id="div-02">Это div-02</div>
<script type="text/javascript">
var el = document.getElementById('div-01').nextElementSibling;
console.log('Сосед div-01:');
while (el) {
console.log(el.nodeName);
el = el.nextElementSibling;
}
</script>
</pre>
<p>Этот пример выведет в консоль следующее:</p>
<pre>Сосед div-01:
DIV
SCRIPT</pre>
<h2 id="Полифил_для_IE8">Полифил для IE8</h2>
<p>Данное свойство не поддерживается до IE9. Используйте следующий полифил, чтобы обойти этот недостаток:</p>
<pre class="brush: js">// Источник: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if (!('nextElementSibling' in document.documentElement)) {
Object.defineProperty(Element.prototype, 'nextElementSibling', {
get: function() {
var e = this.nextSibling;
while (e && 1 !== e.nodeType) {
e = e.nextSibling;
}
return e;
}
});
}</pre>
<h2 id="Полифил_для_IE9_и_Safari">Полифил для IE9+ и Safari</h2>
<pre class="brush: js">// Источник: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
(function(arr) {
arr.forEach(function(item) {
if (item.hasOwnProperty('nextElementSibling')) {
return;
}
Object.defineProperty(item, 'nextElementSibling', {
configurable: true,
enumerable: true,
get: function() {
var el = this;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
},
set: undefined
});
});
})([Element.prototype, CharacterData.prototype]);</pre>
<h2 id="Specification">Спецификации</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-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Split the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.<br>
The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.</td>
</tr>
<tr>
<td>{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}</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="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{Compat("api.Element.nextElementSibling")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Чистый интерфейс {{domxref("ChildNode")}}.</li>
<li>Типы объектов, реализующих этот чистый интерфейс: {{domxref("CharacterData")}}, {{domxref("Element")}}, и {{domxref("DocumentType")}}. </li>
</ul>
|
