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(otherElement)

Параметри

*otherElement

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

Return

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).

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// 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` знаходяться у різних гілках документа");
}

// 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`");
}