compareDocumentPosition() — порядок вузлів у дереві DOM

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

Метод 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

Приклади

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

<header>
  <h2 class="title">Node: compareDocumentPosition() method</h2>
  <p class="description">Порівнює позицію двох вузлів у дереві документа та повертає бітову маску, що вказує на їх відносне розташування.</p>
</header>
<main>
  <div class="result">
    <div class="container">
      <div class="node1">
        <p>Вузол 1</p>
      </div>
      <div class="node2">
        <p>Вузол 2</p>
      </div>
    </div>
    <div class="controls">
      <button id="compare">Порівняти вузли</button>
    </div>
    <div class="output"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.node1, .node2 {
  background-color: #e0e0e0;
  padding: 10px;
  margin: 0 10px;
}

.controls {
  text-align: center;
  margin-bottom: 20px;
}

.output {
  font-weight: bold;
}

const node1 = document.querySelector('.node1');
const node2 = document.querySelector('.node2');
const compareButton = document.getElementById('compare');
const output = document.querySelector('.output');

compareButton.addEventListener('click', () => {
  const position = node1.compareDocumentPosition(node2);
  let result = '';

  if (position & Node.DOCUMENT_POSITION_DISCONNECTED) {
    result += 'Вузли не пов\'язані між собою. ';
  }
  if (position & Node.DOCUMENT_POSITION_PRECEDING) {
    result += 'Вузол 1 передує Вузлу 2. ';
  }
  if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
    result += 'Вузол 1 слідує за Вузлом 2. ';
  }
  if (position & Node.DOCUMENT_POSITION_CONTAINS) {
    result += 'Вузол 1 містить Вузол 2. ';
  }
  if (position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
    result += 'Вузол 1 міститься всередині Вузла 2. ';
  }
  if (position & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) {
    result += 'Специфічна для реалізації позиція. ';
  }

  output.textContent = result || 'Немає відносного розташування між вузлами.';
});
//# sourceURL=pen.js

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