Чтобы найти первого родителя с определенным атрибутом в DOM (Document Object Model) с использованием JavaScript, можно воспользоваться методом closest()
. Этот метод будет искать родительские элементы начиная от текущего элемента и вверх по дереву DOM, пока не найдет элемент с заданным атрибутом.
Вот пример кода, демонстрирующий использование метода closest()
:
const findParentWithAttribute = (element, attribute) => { // Проверяем, если текущий элемент содержит заданный атрибут if (element.hasAttribute(attribute)) { return element; // Возвращаем текущий элемент } // Проверяем, есть ли родительский элемент if (element.parentElement) { return findParentWithAttribute(element.parentElement, attribute); // Рекурсивный вызов для родительского элемента } return null; // Не найдено родительского элемента с заданным атрибутом }; // Пример использования функции для поиска родителя с атрибутом "data-parent" const targetElement = document.querySelector('.target-element'); const parentWithAttribute = findParentWithAttribute(targetElement, 'data-parent'); if (parentWithAttribute) { console.log('Найден родительский элемент с атрибутом:', parentWithAttribute); } else { console.log('Родительский элемент с заданным атрибутом не найден'); }
Здесь мы создаем функцию findParentWithAttribute()
, которая принимает два аргумента: element
(текущий элемент, от которого начинается поиск) и attribute
(искомый атрибут). Внутри функции мы сначала проверяем, содержит ли текущий элемент заданный атрибут с помощью метода hasAttribute()
. Если да, то мы возвращаем этот элемент.
Затем мы проверяем, есть ли у элемента родительский элемент с помощью свойства parentElement
. Если есть, то мы рекурсивно вызываем функцию findParentWithAttribute()
для родительского элемента. Это позволяет продолжать поиск родителей до тех пор, пока не будет найден родитель с заданным атрибутом или не закончится дерево DOM (тогда возвращается значение null
).
В приведенном примере мы использовали класс .target-element
для выбора элемента, от которого начинается поиск, и атрибут data-parent
в качестве искомого атрибута. Если будет найден родительский элемент с этим атрибутом, то он будет выведен в консоль. В противном случае будет выведено сообщение о том, что родительский элемент с заданным атрибутом не был найден.
Таким образом, использование метода closest()
в сочетании с рекурсивной функцией позволяет найти первого родителя с определенным атрибутом в DOM, начиная от указанного элемента.