Element.
Zwraca najbliższego przodka (lub sam element) pasującego do selektora CSS albo null.
- Zwraca
- Najbliższy pasujący element (może to być sam element) albo
null.
Przykład
#const icon = document.querySelector('.icon')
console.log(icon.closest('button'))
console.log(icon.closest('.card').dataset.id)
console.log(icon.closest('.sidebar'))
console.log(icon.closest('span') === icon)Definicja i zastosowanie
#Metoda closest() idzie od elementu w górę drzewa DOM: sprawdza najpierw sam element, potem jego rodzica, dziadka i tak dalej. Zwraca pierwszy element pasujący do selektora albo null, jeśli dotrze do początku dokumentu i nic nie znajdzie.
To podstawowe narzędzie przy delegowaniu zdarzeń. Gdy użytkownik kliknie ikonę wewnątrz przycisku, a przycisk leży w karcie produktu, event.target.closest(".card") od razu znajdzie kartę, bez względu na to, w który jej fragment trafiło kliknięcie.
Pamiętaj, że closest() uwzględnia element, od którego zaczyna. Działa w przeciwnym kierunku niż querySelector(), które szuka w dół, wśród potomków.
Składnia
#element.closest(selectors)Parametry
#selectors
napis
Selektor CSS, np.".card","li"albo"[data-id]".
Więcej przykładów
#const catalog = document.querySelector('#catalog')
catalog.addEventListener('click', (event) => {
const button = event.target.closest('.buy')
if (!button) return
const card = button.closest('.card')
console.log(`Dodano do koszyka: ${card.dataset.course}`)
})
catalog.querySelector('b').click()const menu = document.querySelector('#menu')
document.addEventListener('click', (event) => {
if (!event.target.closest('#menu')) {
menu.classList.remove('open')
}
console.log('Menu otwarte:', menu.classList.contains('open'))
})
document.querySelector('#menu button').click()
document.querySelector('#content').click()Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przy delegowaniu zdarzeń zawsze sprawdzaj, czy
closest()coś znalazło (if (!button) return), bo kliknięcie mogło trafić obok. - Pamiętaj, że
closest()sprawdza też sam element:button.closest("button")zwróci ten sam przycisk. - Do szukania w dół, wśród potomków, służy
querySelector().
Powiązane hasła
#- Event.targetElement, na którym faktycznie wystąpiło zdarzenie, np. kliknięty przycisk wewnątrz listy.
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
- HTMLElement.datasetObiekt z wartościami atrybutów data-* elementu, do odczytu i zapisu własnych danych.
Widzisz błąd albo brakuje przykładu? Napisz do nas.