Методы JavaScript для выбора ближайшего класса

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

  1. querySelector или querySelectorAll: эти методы можно использовать для выбора элементов на основе селекторов CSS. Чтобы выбрать ближайший класс, вы можете использовать комбинацию класса элемента и методов closestили closestAllдля обхода дерева DOM и поиска ближайшего совпадающего элемента.
var closestElement = document.querySelector('.your-class').closest('.target-class');
  1. closest: этот метод возвращает ближайший элемент-предок, соответствующий данному селектору CSS. Вы можете использовать его, чтобы найти ближайший родительский элемент с определенным классом.
var closestElement = document.querySelector('.your-class').closest('.target-class');
  1. matches: метод matchesпроверяет, соответствует ли элемент указанному селектору CSS. Вы можете использовать его в сочетании с parentNodeдля перемещения вверх по дереву DOM, пока не найдете элемент нужного класса.
var element = document.querySelector('.your-class');
while (element && !element.matches('.target-class')) {
  element = element.parentNode;
}
var closestElement = element;
  1. classList: свойство classListпредоставляет методы для управления классами элемента. Вы можете использовать метод containsвместе с parentNodeдля перебора родительских элементов, пока не найдете нужный класс.
var element = document.querySelector('.your-class');
while (element && !element.classList.contains('target-class')) {
  element = element.parentNode;
}
var closestElement = element;