Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Node.compareDocumentPosition()

JavaScript Node

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

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

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

КонстантаЗначениеОписание
DOCUMENT_POSITION_DISCONNECTED1Нет родства, два узла не принадлежат одному документу.
DOCUMENT_POSITION_PRECEDING2Первый узел расположен после второго узла.
DOCUMENT_POSITION_FOLLOWING4Первый узел расположен перед вторым узлом.
DOCUMENT_POSITION_CONTAINS8Первый узел расположен внутри второго узла.
DOCUMENT_POSITION_CONTAINED_BY16Второй узел расположен внутри первого узла.
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC32Нет родства, или два узла являются двумя атрибутами одного элемента.

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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 метода .compareDocumentPosition()
JavaScript Node
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

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