JavaScript метод Node.compareDocumentPosition()

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

JavaScript метод .compareDocumentPosition() объекта Node позволяет сравнить положение текущего узла с положением другого узла, и возвратить целое число, которое описывает, где они находятся в документе по отношению друг к другу.

Возвращаемое значение представляет собой битовую маску со следующими значениями:

Константа Значение Описание — Node.compareDocumentPosition()
Константа Значение Описание
DOCUMENT_POSITION_DISCONNECTED 1 Узлы не связаны: они находятся в разных деревьях (например, в разных документах).
DOCUMENT_POSITION_PRECEDING 2 Узел otherNode расположен в документе перед узлом node.
DOCUMENT_POSITION_FOLLOWING 4 Узел otherNode расположен в документе после узла node.
DOCUMENT_POSITION_CONTAINS 8 Узел otherNode содержит узел node (является его предком).
DOCUMENT_POSITION_CONTAINED_BY 16 Узел otherNode находится внутри узла node (является его потомком).
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32 Порядок определяется реализацией браузера. Устанавливается вместе с DOCUMENT_POSITION_DISCONNECTED, а также при сравнении двух атрибутов одного элемента.

В возвращаемом значении может быть установлено один или более битов. Например, если узел расположен ранее в документе и также содержит узел, на котором compareDocumentPosition() был вызван, то DOCUMENT_POSITION_CONTAINS и DOCUMENT_POSITION_PRECEDING биты будут установлены, приводя к значению 0x0A, или десятичного числа 10.

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

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

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

Показать браузеры
Совместимостьapi.Node.compareDocumentPosition
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
compareDocumentPosition✓2✓12✓1✓≤12.1✓4✓18✓4✓≤12.1✓3.2✓1.0✓4.4✓3.2

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

JavaScript синтаксис

JavaScript
const result = node.compareDocumentPosition(otherNode);

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

DOM Standard.

Значения параметров

Параметры Node.compareDocumentPosition()
Параметр Описание
otherNode Узел, положение которого сравнивается с положением текущего узла node. Обязательный аргумент.

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

Положение элемента относительно списка

Нажмите ▶, затем Check: под кнопкой появится 20 — сумма флагов CONTAINED_BY (16) и FOLLOWING (4). Поменяйте местами firstUl и active в main.js и сравните результат (10).

index.html
HTML
<button data-migration-click-0="">Check</button>
<ul id="first">
  <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
const firstUl = document.getElementById('first'),
    active = document.querySelector('.active'),
    result = document.getElementById('result')

function myFunc() {
    const compare = firstUl.compareDocumentPosition(active)
    result.innerHTML = compare
}

// Обработчики кнопок перенесены из 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>) вызываем функции myFunc(), которая с помощью метода .compareDocumentPosition() позволяет сравнить положение узла с классом active с положением элемента <ul>, и возвратить целое число, которое описывает, где они находятся в документе по отношению друг к другу.

С помощью метода .innerHTML мы вставляем результат проверки в элемент <p>. В нашем случае мы получим значение 20, которое означает, что элемент с классом active находится внутри элемента <ul> (значение 16), а так же элемент <ul> находится перед элементом с классом active (значение 4).