Element.closest()

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode Element.closest() renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie null.

Syntaxe

var elt = element.closest(selecteurs); 

Paramètres

selecteurs
Une chaîne DOMString qui contient une liste de sélecteurs tels que "p:hover, .toto + q"

Valeur de retour

L'élément (Element) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou null s'il n'y en a aucun.

Exceptions

  • SyntaxError sera levée si selecteurs n'est pas une liste de sélecteurs valide.

Exemples

HTML

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

JavaScript

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// Renvoie l'élément avec l'identifiant id=div-02

var r2 = el.closest("div div");  
// Renvoie le plus proche ancêtre qui est un div 
// dans un div. Ici, c'est div-03 lui-même.

var r3 = el.closest("article > div");  
// Renvoie le plus proche ancêtre qui est un div
// et dont l'élément parent est article. Ici c'est 
// div-01.

var r4 = el.closest(":not(div)");
// Renvoie le plus proche ancêtre qui n'est pas un
// div. Dans ce cas, c'est l'élément article.

Prothèse d'émulation (polyfill)

Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser document.querySelectorAll(), on peut utiliser la prothèse suivante :

if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = 
  function(s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i,
        el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {};
    } while ((i < 0) && (el = el.parentElement)); 
    return el;
  };
}

Spécifications

Spécification État Commentaires
DOM
La définition de 'Element.closest()' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 41 Pas de support 35.0 (35.0) Pas de support 28 9
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? 35.0 (35.0) Pas de support ? 9.0

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Teepo
 Dernière mise à jour par : SphinxKnight,