---
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" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox">var <em>nextNode</em> = elementNodeReference.nextElementSibling; </pre>

<h2 id="Example" name="Example">Пример</h2>

<pre class="brush: html">&lt;div id="div-01"&gt;Это div-01&lt;/div&gt;
&lt;div id="div-02"&gt;Это div-02&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  var el = document.getElementById('div-01').nextElementSibling;
  console.log('Сосед div-01:');
  while (el) {
    console.log(el.nodeName);
    el = el.nextElementSibling;
  }
&lt;/script&gt;
</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 &amp;&amp; 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" name="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" name="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>