JS метод Element.compareDocumentPosition()

Загальний опис

Метод compareDocumentPosition() є корисним інструментом у JavaScript, який дозволяє порівнювати позиції елементів у DOM-дереві. Цей метод дозволяє визначити, чи є один елемент дочірнім, батьківським, нащадком чи сусіднім до іншого елемента. Він повертає числове значення, що кодує різні відносини між елементами, з якими ви можете працювати.

Основна суть методу compareDocumentPosition() полягає в тому, що він надає можливість визначити відносини між елементами у DOM-структурі, що може бути корисним у випадках, коли вам потрібно взаємодіяти з різними елементами сторінки або визначати їхні взаємини.

Один з основних способів використання методу compareDocumentPosition() - це визначення, чи є один елемент нащадком іншого. Наприклад:

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

const position = parentElement.compareDocumentPosition(childElement);

if (position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
    console.log('childElement є нащадком parentElement');
}

У цьому прикладі ми перевіряємо, чи є childElement нащадком parentElement, використовуючи метод compareDocumentPosition(). Якщо результат містить Node.DOCUMENT_POSITION_CONTAINED_BY, то це означає, що childElement є нащадком parentElement.

Крім того, метод compareDocumentPosition() може бути використаний для визначення порядку елементів у DOM-структурі. Наприклад:

const element1 = document.getElementById('element1');
const element2 = document.getElementById('element2');

const position = element1.compareDocumentPosition(element2);

if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
    console.log('element1 передує element2 у DOM');
} else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
    console.log('element1 слідує за element2 у DOM');
}

У цьому прикладі ми визначаємо, чи element1 слідує за element2 у DOM-структурі або передує йому, використовуючи метод compareDocumentPosition().

Загалом, метод compareDocumentPosition() є потужним інструментом для порівняння позицій елементів у DOM-структурі. Він дозволяє вам взаємодіяти з елементами сторінки та визначати їхні взаємні відносини, що робить його корисним у широкому спектрі сценаріїв веб-розробки.

правити

Порада

Початківцям важливо зрозуміти, що метод compareDocumentPosition() дозволяє порівняти розташування двох елементів в DOM-дереві. Для використання цього методу необхідно мати знання про структуру документа та розуміння його внутрішньої організації.

автор: Bond правити

Порада

Досвідченим програмістам важливо пам'ятати, що compareDocumentPosition() повертає комбінацію флагів, що вказують на відносини між елементами: чи є один елемент предком, нащадком, сусідом або самим собою відносно іншого елемента. Це дозволяє ефективно керувати порядком елементів у документі та виконувати необхідні маніпуляції з DOM.

автор: Bond правити

Порада

Порада для початківців: перед використанням compareDocumentPosition() варто вивчити структуру DOM та збагатити розуміння про взаємозв'язки між елементами. Наприклад, можна використовувати інструменти браузера для вивчення DOM-структури та її взаємозв'язків.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

compareDocumentPosition(otherElement)

Параметри

otherElement

Елемент, для якого потрібно повідомити позицію відносно даного елементу.

автор: Bond

правити

Повернення

Element

Повертає ціле значення, що представляє позицію otherElement відносно даного елементу як комбінацію флагів. Ці флаги відображають різні відносини між елементами, такі як DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDING, DOCUMENT_POSITION_FOLLOWING, DOCUMENT_POSITION_CONTAINS, DOCUMENT_POSITION_CONTAINED_BY, та DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC. Більше одного біта встановлено, якщо застосовуються різні сценарії. Наприклад, якщо otherNode знаходиться раніше у документі та містить елемент, на якому було викликано compareDocumentPosition(), тоді встановлюються біти DOCUMENT_POSITION_CONTAINS та DOCUMENT_POSITION_PRECEDING, що дає значення 10 (0x0A).

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	1	4	≤12.1	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="`element1`">Демонстраційний елемент</div>
<div id="`element2`">Демонстраційний елемент</div>

// HTML розмітка
// <div id="element1">Element 1</div>
// <div id="element2">Element 2</div>

// JavaScript код
const element1 = document.getElementById("`element1`");
const element2 = document.getElementById("`element2`");

const position = element1.compareDocumentPosition(element2);

if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
  console.log("`element1` знаходиться перед `element2` у документі");
} else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
  console.log("`element1` знаходиться після `element2` у документі");
} else {
  console.log("`element1` та `element2` знаходяться у різних гілках документа");
}

<div id="`container`">Демонстраційний елемент</div>
<div id="`element1`">Демонстраційний елемент</div>
<div id="`element2`">Демонстраційний елемент</div>

// HTML розмітка
// <div id="container">
//   <div id="element1">Element 1</div>
//   <div id="element2">Element 2</div>
// </div>

// JavaScript код
const container = document.getElementById("`container`");
const element1 = document.getElementById("`element1`");
const element2 = document.getElementById("`element2`");

const position1 = container.compareDocumentPosition(element1);
const position2 = container.compareDocumentPosition(element2);

if (position1 & Node.DOCUMENT_POSITION_CONTAINED_BY) {
  console.log("`element1` знаходиться всередині `container`");
}

if (position2 & Node.DOCUMENT_POSITION_CONTAINS) {
  console.log("`container` містить `element2`");
}