Методы JavaScript для поиска ближайшего элемента: QuerySelector, Closest и ручной обход

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

  1. querySelectorи querySelectorAll: эти методы можно использовать для выбора элементов на основе селекторов CSS. Комбинируя их с методами обхода, такими как previousElementSiblingи nextElementSibling, вы можете перейти к ближайшим элементам. Например:

    var element = document.querySelector('.my-element');
    var previousElement = element.previousElementSibling;
    var nextElement = element.nextElementSibling;
  2. closest: метод closestпозволяет найти ближайший элемент-предок, соответствующий данному селектору. Он начинается с текущего элемента и проходит вверх по дереву DOM, пока не будет найден соответствующий элемент. Например:

    var element = document.querySelector('.my-element');
    var closestElement = element.closest('.parent-element');
  3. Обход вручную. Вы можете вручную перемещаться по дереву DOM, используя такие свойства, как parentNode, previousSiblingи nextSibling. Этот метод требует перебора элементов до тех пор, пока не будет выполнено желаемое условие. Вот пример:

    var element = document.querySelector('.my-element');
    var previousElement = element.previousSibling;
    while (previousElement && previousElement.nodeType !== 1) {
     previousElement = previousElement.previousSibling;
    }