NonDocumentTypeChildNode.nextElementSibling

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

NonDocumentTypeChildNode.nextElementSibling свойство только для чтения, возвращающее последующий элемент перед текущим, или null, если элемент является последним в своём родительском узле.

Синтаксис

var nextNode = elementNodeReference.nextElementSibling; 

Пример

<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>

Этот пример выведет в консоль следующее:

Сосед div-01:
DIV
SCRIPT

Полифилл для IE8

Данное свойство не пожддерживается до IE9. Используйте следующий полифилл, чтобы обойти этот недостаток:

// Источник: 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;
        }
    });
}

Полифилл для IE9+ и Safari

// Источник: 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]);

Спецификации

Specification Status Comment
DOM
Определение 'ChildNodenextElementSibling' в этой спецификации.
Живой стандарт Split the ElementTraversal interface in ChildNode, ParentNode, and NonDocumentTypeChildNode. This method is now defined on the former.
The Element and CharacterData interfaces implemented the new interface.
Element Traversal Specification
Определение 'ElementTraversal.nextElementSibling' в этой спецификации.
Устаревшая Added its initial definition to the ElementTraversal pure interface and use it on Element.

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Element) 4 3.5 (1.9.1) 9 9.8 4
Поддержка CharacterData 29.0 25 (25) [1] Нет 16.0 Нет
Браузеры Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ( Element) (Да) 1.0 (1.9.1) (Да) 9.8 (Да)
Поддержка CharacterData (Да) 25.0 (25) Нет 16.0 Нет

[1] Firefox 25 также добавил это свойство в DocumentType, но оно было удалено в Firefox 28, из-за проблем совместимости.

См. также