JavaScript closest: удобный метод для поиска ближайшего родителя по классу или селектору
Метод `closest()` в JavaScript используется для поиска ближайшего родительского элемента, соответствующего указанному селектору. Он применяет обход от текущего элемента вверх по иерархии DOM-дерева до тех пор, пока не будет найден элемент, соответствующий селектору, или не будет достигнут верхний уровень документа.
Вот пример кода, демонстрирующий использование `closest()`:
javascript
// HTML
// JavaScript
const button = document.getElementById('button');
const parent = button.closest('#parent');
console.log(parent.id); // Выводит "parent"
В этом примере у нас есть кнопка с идентификатором `button`, и мы хотим найти ближайший родительский элемент с идентификатором `parent`. Мы используем метод `closest()` на элементе кнопки и передаем ему селектор `#parent`. Метод `closest()` обходит родительские элементы, начиная с кнопки, и возвращает первый элемент, который соответствует заданному селектору. Затем мы выводим идентификатор родительского элемента в консоль.
Метод `closest()` может принимать не только идентификаторы, но и другие селекторы, такие как классы или атрибуты. Например:
javascript
// HTML
// JavaScript
const button = document.querySelector('.button');
const parent = button.closest('.parent');
console.log(parent.className); // Выводит "parent"
В этом примере мы используем классы вместо идентификаторов для поиска ближайшего родительского элемента.
Метод `closest()` очень удобен, когда нам нужно найти родительский элемент, но мы не знаем его точного расположения в иерархии DOM-дерева.