Проверка позиции узла в дереве 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.
