Как найти первого родителя с определенным атрибутом в Dom?

Чтобы найти первого родителя с определенным атрибутом в 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, начиная от указанного элемента.