Проверка позиции узла в дереве DOM: методы compareDocumentPosition() и contains()

Веб-страницы представляют собой деревья элементов HTML, известных как деревья DOM (Document Object Model). Когда вы работаете с веб-страницей с помощью JavaScript, иногда необходимо определить, находится ли один элемент внутри другого элемента или как он относится к другому элементу в дереве DOM.

Для этого можно использовать методы compareDocumentPosition() и contains(), которые позволяют сравнивать позиции узлов в дереве DOM.

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

• 1 — элемент находится вне дерева DOM
• 2 — элемент находится внутри элемента, но не является его потомком
• 4 — элемент является предком другого элемента, но не является его родительским элементом
• 8 — элемент является родительским элементом другого элемента
• 16 — элемент находится внутри другого элемента и является его потомком
• 32 — элемент идентичен другому элементу

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

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

const comparison = parentElement.compareDocumentPosition(childElement);

if (comparison & Node.DOCUMENT_POSITION_CONTAINED_BY) {
  console.log('childElement находится внутри parentElement');
} else if (comparison & Node.DOCUMENT_POSITION_CONTAINS) {
  console.log('parentElement находится внутри childElement');
} else {
  console.log('childElement и parentElement находятся в разных ветвях дерева DOM');
}

Метод contains() проверяет, находится ли один элемент внутри другого элемента в дереве DOM. Он возвращает логическое значение true, если элемент содержит другой элемент, и false в противном случае.

Пример использования метода contains():

const parentElement = document.querySelector('#parent'); const childElement = document.querySelector('#child'); if (parentElement.contains(childElement)) { console.log('childElement находится внутри parentElement'); } else { console.log('childElement не находится внутри parentElement'); }

Оба эти метода могут быть полезны при выполнении различных операций на веб-странице с использованием JavaScript.