Element : méthode closest()
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.
La méthode closest() de l'interface Element traverse l'élément et ses parents (en direction de la racine du document) jusqu'à ce qu'elle trouve un nœud correspondant au sélecteur CSS défini.
Syntaxe
js
closest(selectors)
Paramètres
selectors-
Une chaîne de caractères de sélecteurs CSS valides pour correspondre à un
Elementet à ses ancêtres.
Valeur de retour
L'ancêtre le plus proche de Element ou lui-même, qui correspond aux selectors. S'il n'y a pas un tel élément, null est retourné.
Exceptions
SyntaxErrorDOMException-
Levée si la chaîne de caractères
selectorsn'est pas un sélecteur CSS valide.
Exemples
HTML
html
<article>
<div id="div-01">
Voici div-01
<div id="div-02">
Voici div-02
<div id="div-03">Voici div-03</div>
</div>
</div>
</article>
JavaScript
js
const el = document.getElementById("div-03");
// l'ancêtre le plus proche avec l'identifiant "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">
// l'ancêtre le plus proche qui est un div dans un div
console.log(el.closest("div div")); // <div id="div-03">
// l'ancêtre le plus proche qui est un div et qui a un article parent
console.log(el.closest("article > div")); // <div id="div-01">
// l'ancêtre le plus proche qui n'est pas un div
console.log(el.closest(":not(div)")); // <article>
Spécifications
| Spécification |
|---|
| DOM # ref-for-dom-element-closest① |
Compatibilité des navigateurs
Notes de compatibilité
- Pour Edge 15-18,
document.createElement(tagName).closest(tagName)retournenullsi l'élément n'est pas d'abord connecté (directement ou indirectement) à l'objet de contexte, par exemple l'objetDocumentdans le cas du DOM classique.
Voir aussi
- Le module des sélecteurs CSS
- Les autres méthodes de
Elementqui prennent des sélecteurs en argument :Element.querySelector(),Element.querySelectorAll()etElement.matches().