querySelector "навпаки"? А для пошуку потрібного батька не треба було б робити нескінченні while { el.parentElement… }?Якщо я вам скажу, що таке уже дуже давно існує?
closest() — це метод DOM API, який дозволяє знайти найближчий елемент-предок (або сам елемент), що відповідає заданому CSS-селектору. Він перевіряє спочатку сам елемент, потім піднімається до батька, і так далі догори по DOM-ієрархії до кореня документа.Якщо елемент знайдено — повертається він. Якщо ні — null.
Ось таким чином можна впевнено ловити клік саме на потрібному елементі, навіть якщо фактично ми клікали десь на його дочірні елементи:
container.addEventListener('click', (event) => {
const item = event.target.closest('.list-item');
if (item) {
item.classList.toggle('selected');
}
});Найчастіше
closest() допомагає при делегуванні подій через контейнери, при роботі з вкладеними елементами або ж коли потрібно визначити належність елемента до певного блоку.Цікаво? Постав серденько та пошир цей допис серед друзів. Це дуже цінно для ровитку каналу.
Важливі нюанси:
• Якщо сам елемент підходить — він і повертається.
• Пошук тільки догори (не вниз).
• Якщо немає збігів — повертається null.
• Працює тільки для елементів, що фактично знаходяться в DOM.
Трохи історії: ідея
closest() давно використовувалась, до прикладу, у jQuery (версія 1.3, ~2009 рік). Метод $(el).closest(selector) працював за тією ж логікою: спочатку елемент, потім його батьки. У бравзерах closest() зʼявився в стандарті Selectors API Level 2 і підтримується скрізь із 2015 року.Тож сьогодні це надійний і швидкий спосіб шукати потрібний контекст без зайвого перебору руками.
А ви як, користуєтесь
closest, чи досі перебираєте усіх батьків руками? Напишіть обовʼязково в коментарях!MDN
@babichdev