Методы поиска ближайшего элемента с определенным атрибутом данных в JavaScript

Чтобы найти ближайший элемент с определенным атрибутом данных в JavaScript, вы можете использовать различные методы. Вот несколько примеров:

Метод 1: использование метода close()

const element = document.querySelector('.target-element');
const closestWithDataAttr = element.closest('[data-attribute]');

В этом примере метод closest()используется для поиска ближайшего предка элемента, имеющего определенный атрибут данных ([data-attribute ]).

Метод 2: использование метода querySelector()

const element = document.querySelector('.target-element');
let closestWithDataAttr = null;
let parentElement = element.parentElement;
while (parentElement) {
  if (parentElement.hasAttribute('data-attribute')) {
    closestWithDataAttr = parentElement;
    break;
  }
  parentElement = parentElement.parentElement;
}

В этом примере метод querySelector()используется для поиска ближайшего предка elementпутем обхода дерева DOM до тех пор, пока не будет найден элемент с указанным атрибутом данных. найден.

Метод 3. Использование цикла и метода getAttribute()

const element = document.querySelector('.target-element');
let closestWithDataAttr = null;
let currentElement = element;
while (currentElement.parentElement) {
  if (currentElement.parentElement.getAttribute('data-attribute')) {
    closestWithDataAttr = currentElement.parentElement;
    break;
  }
  currentElement = currentElement.parentElement;
}

В этом примере используется цикл для перебора родительских элементов elementи проверка наличия у каждого родительского элемента желаемого атрибута данных с помощью метода getAttribute().р>

Это всего лишь несколько способов найти ближайший элемент с определенным атрибутом данных в JavaScript. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям, исходя из вашего конкретного случая использования.