JavaScript метод Node.compareDocumentPosition()

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

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

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

Константа	Значение	Описание
DOCUMENT_POSITION_DISCONNECTED	1	Нет родства, два узла не принадлежат одному документу.
DOCUMENT_POSITION_PRECEDING	2	Первый узел расположен после второго узла.
DOCUMENT_POSITION_FOLLOWING	4	Первый узел расположен перед вторым* узлом.*
DOCUMENT_POSITION_CONTAINS	8	Первый узел расположен внутри второго узла.
DOCUMENT_POSITION_CONTAINED_BY	16	Второй узел расположен внутри первого узла.
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32	Нет родства, или два узла являются двумя атрибутами одного элемента.

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`Node.compareDocumentPosition()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

const result = node.contains( otherNode );

node - Node
otherNode - Node

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

Document Object Model (DOM) Level 1

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .compareDocumentPosition()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Check</button> <!-- добавляем атрибут событий onclick -->
		<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>
		<script>
	const firstUl = document.getElementById("first"), // находим элемент по id
	      active = document.querySelector(".active"), // находим элемент по классу
	      result = document.getElementById("result"); // находим элемент по id

	function myFunc() {
	  const compare = firstUl.compareDocumentPosition(active); // производим сравнение элементов
	  result.innerHTML = compare; // вставляем результат проверки в элемент <p>
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функции myFunc(), которая с помощью метода .compareDocumentPosition позволяет сравнить положение узла с классом active с положением элемента <ul>, и возвратить целое число, которое описывает, где они находятся в документе по отношению друг к другу.

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

Результат нашего примера:

Пример использования JavaScript метода .compareDocumentPosition()

JavaScript Node