JavaScript свойство Node.nextSibling

Определение и применение

JavaScript свойство nextSibling объекта Node возвращает дочерний узел следующий за указанным узлом внутри родительского элемента, или null, если указанный узел является последним дочерним узлом в родительском элементе.

Примечание

Обращаю Ваше внимание на то, что браузеры вставляют текстовые узлы в документ для представления пробелов в исходной разметке. По этой причине свойство nextSibling может ссылаться на текстовый узел (пробел), или например, узел комментария, а не элемент. При необходимости, с помощью свойства nextElementSibling объекта NonDocumentTypeChildNode вы можете получить следующий элемент, пропуская прочие узлы. Для получения предыдущего элемента вы можете воспользоваться свойством previousElementSibling объекта NonDocumentTypeChildNode.

Для того, чтобы возвратить дочерний узел предшествующий указанному узлу внутри родительского элемента, или null, если указанный узел является первым дочерним узлом в родительском элементе, вы можете воспользоваться свойством previousSibling.

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Node.nextSibling
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`nextSibling`	✓1	✓12	✓1	✓7	✓1.1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const nextNode = node.nextSibling;

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

DOM Standard.

Пример использования

Все узлы после выделенного пункта

Нажмите ▶, затем Click me: под кнопкой появятся имена всех узлов после первого пункта — #text и LI попеременно. Замените nextSibling на nextElementSibling в main.js и сравните.

index.html

HTML

<button data-migration-click-0="">Click me</button>
<ul>
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<p id="result"></p>

main.js

JavaScript

function myFunc() {
    let elem = document.querySelector('.active').nextSibling,
        result = document.getElementById('result')

    while (elem) {
        result.innerHTML += elem.nodeName + '<br>'
        elem = elem.nextSibling
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

Инициализирует две переменные, первая содержит ссылку на элемент, который является дочерним узлом следующим за элементом с классом active внутри родительского элемента, а вторая ссылку на элемент в который мы будем выводить результат.
С помощью цикла while и свойства nodeName мы добавляем в элемент <p> строковое значение, определяющее имя текущего узла (узел следующий за элементом, содержавшимся в переменной elem), и тег переноса строки (<br>). Мы изменяем значение переменной elem на узел, который мы добавили в элемент <p>. Цикл while будет срабатывать до тех пор пока не вернется значение null - указанный узел будет последним дочерним узлом в родительском элементе. В результате чего это позволит нам вывести все узлы следующие за элементом с классом active:
- Поочерёдно значения #text (текстовый узел - пробел между элементами) и LI (узел элемента - <li>): по четыре раза, начиная с #text. Обратите внимание, что имена элементов возвращаются в верхнем регистре (в XHTML или любых других форматах XML значение в нижнем регистре).
- #text - (текстовый узел - пробел после последнего элемента <li>).