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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript синтаксис

const beforeElement = elementNodeReference.previousElementSibling;

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

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.