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

JS-метод closest для нахождения родительского элемента

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

Пример использования метода closest:

// HTML-разметка
<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

// JavaScript-код
const childElement = document.querySelector('.child');
const parentElement = childElement.closest('.parent');
console.log(parentElement); // <div class="parent"></div>

В этом примере у нас есть элемент с классом "child". Мы хотим найти его ближайшего родителя с классом "parent". Метод closest позволяет нам это сделать. Он возвращает ближайший родительский элемент, который соответствует указанному селектору.

Метод closest также позволяет использовать сложные селекторы, такие как псевдоклассы, псевдоэлементы и атрибуты. Например, мы можем найти ближайший родительский элемент с классом "parent" и имеющий атрибут "data-active":

// HTML-разметка
<div class="grandparent">
  <div class="parent" data-active="true">
    <div class="child"></div>
  </div>
</div>

// JavaScript-код
const childElement = document.querySelector('.child');
const parentElement = childElement.closest('.parent[data-active="true"]');
console.log(parentElement); // <div class="parent" data-active="true"></div>

В этом примере мы использовали атрибутный селектор "[data-active="true"]", чтобы найти ближайший родительский элемент с классом "parent" и атрибутом "data-active", установленным в значение "true".

Метод closest возвращает только один элемент, ближайший к исходному элементу, который удовлетворяет селектору. Если такого элемента нет, метод возвращает null.

Еще одна полезная возможность метода closest - это возможность использовать его внутри цикла для поиска всех элементов, удовлетворяющих заданному селектору. Например, мы можем найти всех родителей с классом "parent":

// HTML-разметка
<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

// JavaScript-код
const childElements = document.querySelectorAll('.child');
childElements.forEach(childElement => {
  const parentElement = childElement.closest('.parent');
  console.log(parentElement); // <div class="parent"></div> (два раза)
});

В этом примере мы используем метод forEach для обхода всех элементов с классом "child". Для каждого элемента мы находим ближайшего родителя с классом "parent" и выводим его в консоль. В результате мы получаем два элемента с классом "parent".

Метод closest является мощным инструментом для работы с родительскими элементами в JavaScript. Он позволяет быстро и удобно находить ближайшие элементы, удовлетворяющие заданным условиям. Его гибкость и простота использования делают его незаменимым при работе с DOM-элементами в веб-разработке на JavaScript.