При работе с веб-разработкой часто встречаются ситуации, когда необходимо проверить, содержит ли родительский элемент определенный дочерний элемент. Независимо от того, динамически изменяете ли вы DOM или проверяете пользовательский ввод, возможность определить, содержит ли родительский элемент дочерний элемент, является полезным навыком. В этой статье мы рассмотрим шесть различных методов выполнения этой задачи с помощью JavaScript и предоставим вам практические примеры кода.

Метод 1: использование свойства parentNode
Один простой способ проверить, содержит ли родительский элемент дочерний элемент, — использовать свойство parentNodeв JavaScript. Это свойство возвращает родительский узел элемента, позволяя вам перемещаться вверх по дереву DOM. Затем вы можете сравнить родительский узел с желаемым родительским элементом, чтобы определить, содержится ли в нем дочерний элемент.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
if (childElement.parentNode === parentElement) {
    // The parent element contains the child element
    console.log('Child element is a part of the parent element.');
} else {
    console.log('Child element is not contained within the parent element.');
}

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

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
if (parentElement.contains(childElement)) {
    console.log('Child element is a part of the parent element.');
} else {
    console.log('Child element is not contained within the parent element.');
}

Метод 3: использование метода querySelector()
Метод querySelector() — это универсальный инструмент, позволяющий выбирать элементы с помощью селекторов CSS. Объединив его с селектором отношений родитель-потомок, вы можете легко проверить, содержит ли родительский элемент дочерний элемент.

const parentElement = document.getElementById('parent');
if (parentElement.querySelector('#child')) {
    console.log('Child element is a part of the parent element.');
} else {
    console.log('Child element is not contained within the parent element.');
}

Метод 4: использование метода matches()
Метод matches()проверяет, соответствует ли элемент определенному селектору CSS. Используя этот метод вместе с селектором, нацеленным на дочерний элемент внутри родительского, вы можете определить, содержит ли родительский элемент дочерний элемент.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
if (childElement.matches('#parent #child')) {
    console.log('Child element is a part of the parent element.');
} else {
    console.log('Child element is not contained within the parent element.');
}

Метод 5. Использование метода compareDocumentPosition()
Метод compareDocumentPosition()сравнивает положение двух узлов в дереве DOM. Проверив возвращаемое значение этого метода, вы можете определить, содержит ли родительский элемент дочерний элемент.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
if (parentElement.compareDocumentPosition(childElement) & Node.DOCUMENT_POSITION_CONTAINS) {
    console.log('Child element is a part of the parent element.');
} else {
    console.log('Child element is not contained within the parent element.');
}

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

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
if (childElement.closest('#parent') === parentElement) {
    console.log('Child element is a part of the parent element.');
} else {
    console.log('Child element is not contained within the parent element.');
}

В этой статье мы рассмотрели шесть различных методов проверки того, содержит ли родительский элемент дочерний элемент. Используя JavaScript и различные методы манипулирования DOM, вы можете легко определить отношения «родитель-потомок» в дереве DOM. Не забудьте выбрать метод, который лучше всего соответствует вашим конкретным требованиям, и удачного вам программирования!