Element.
Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
- Renvoie
- L’élément correspondant le plus proche (cela peut être l’élément lui-même), ou
null.
Exemple
#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)Définition et utilisation
#La méthode closest() remonte l’arbre DOM depuis l’élément : elle vérifie d’abord l’élément lui-même, puis son parent, son grand-parent, et ainsi de suite. Elle renvoie le premier élément qui correspond au sélecteur, ou null si elle atteint le début du document sans rien trouver.
C’est un outil essentiel pour la délégation d’événements. Quand l’utilisateur clique sur une icône à l’intérieur d’un bouton, et que ce bouton se trouve dans une carte produit, event.target.closest(".card") trouve immédiatement la carte, quel que soit le fragment sur lequel le clic est tombé.
N’oubliez pas que closest() prend en compte l’élément de départ lui-même. Elle fonctionne dans le sens inverse de querySelector(), qui cherche vers le bas, parmi les descendants.
Syntaxe
#element.closest(selectors)Paramètres
#selectors
chaîne
Un sélecteur CSS, par ex.".card","li"ou"[data-id]".
Plus d’exemples
#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(`Ajouté au panier : ${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 ouvert :', menu.classList.contains('open'))
})
document.querySelector('#menu button').click()
document.querySelector('#content').click()Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Avec la délégation d’événements, vérifiez toujours que
closest()a trouvé quelque chose (if (!button) return), car le clic a pu tomber à côté. - N’oubliez pas que
closest()vérifie aussi l’élément lui-même :button.closest("button")renverra ce même bouton. - Pour chercher vers le bas, parmi les descendants, utilisez
querySelector().
Entrées associées
#- Event.targetL’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
- HTMLElement.datasetUn objet avec les valeurs des attributs data-* d’un élément, pour lire et écrire vos propres données.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.