JavaScript свойство NonDocumentTypeChildNode.nextElementSibling

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

JavaScript свойство nextElementSibling объекта NonDocumentTypeChildNode является свойством только для чтения, которое возвращает элемент (объект Element), следующий сразу за указанным в списке дочерних элементов родительского элемента, или null, если указанный элемент является последним в списке.

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

Кроме того, если вам необходимо возвратить дочерний узел следующий, или предыдущий указанному узлу внутри родительского элемента, то вы можете воспользоваться свойствами nextSibling и previousSibling объекта Node. Обратите внимание на то, что эти свойства объекта Node могут вернуть как узлы комментария, так и текстовые узлы, а не только узел, который является узлом элемента (объект Element).

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

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

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

Показать браузеры

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

Совместимостьapi.Element.nextElementSibling

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
nextElementSibling	✓2	✓12	✓3.5	✓10	✓4	✓18	✓4	✓10.1	✓3	✓1.0	✓4.4	✓3

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

JavaScript синтаксис

const nextElement = elementNodeReference.nextElementSibling;

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

DOM Standard.

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

Соседние элементы выделенного пункта

Нажмите ▶, затем Click me: два пункта перед выделенным получат зелёный и синий фон, два пункта после — жёлтый и фиолетовый. Текстовые узлы между пунктами пропускаются.

index.html

HTML

<button data-migration-click-0="">Click me</button>

<ul>
  <li>1</li>
  <li>2</li>
  <li class="active">3</li>
  <li>4</li>
  <li>5</li>
</ul>

main.js

JavaScript

const setStyles = function () {
    const active = document.querySelector('.active')

    const previousActive = active.previousElementSibling,
        beforeOne = previousActive.previousElementSibling
    previousActive.style.background = 'green'
    beforeOne.style.background = 'blue'

    const nextActive = active.nextElementSibling,
        throughOne = nextActive.nextElementSibling
    nextActive.style.background = 'yellow'
    throughOne.style.background = 'violet'
}

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

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

Кроме того, мы с помощью свойств nextElementSibling и previousElementSibling объекта NonDocumentTypeChildNode инициализируем переменные, первая следует сразу за указанным в списке дочерних элементов родительского элемента, а вторая находится непосредственно перед указанным элементом с классом active. Также мы инициализировали переменные, которые содержат элементы, находящиеся до и после выбранных элементов (находятся через один элемент от элемента с классом active и перед одним элементом элемента с классом active в маркированном списке <ul>).

В результате чего мы изменяем цвет заднего фона для каждого элемента <li> маркированного списка, за исключением элемента с классом active.