We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

Browser compatibility

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!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (on Element) 4 3.5 (1.9.1) 9 9.8 4
Support on CharacterData 29.0 25 (25) [1] Нет 16.0 Нет
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (on Element) (Да) 1.0 (1.9.1) (Да) 9.8 (Да)
Support on CharacterData (Да) 25.0 (25) Нет 16.0 Нет

[1] Firefox 25 also added this property to DocumentType, this was removed in Firefox 28 due to compatibility problems.

См. также

Метки документа и участники

Внесли вклад в эту страницу: GoodLuck
Обновлялась последний раз: GoodLuck,