Element.closest()

Il metodo closest() dell'interfaccia Element restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce null.

Sintassi

var closestElement = element.closest(selectors); 

Parametri

  • selectors è una DOMString contenente una lista di selettori come "p:hover, .toto + q"
  • element è l'Element in cima all'albero degli elementi da trattare.

Valore del risultato

  • closestElement è l'Element che è l'antenato più vicino degli elementi selezionati. Può essere null.

Eccezioni

  • SyntaxError viene ritornato se i selectors non sono una stringa di elenco di selettori valida.

Esempio

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");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso

var r3 = el.closest("article > div");  
// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01

var r4 = el.closest(":not(div)");
// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno

Polyfill

Per i browser che non supportano Element.closest(),  ma supportano il supporto per element.matches() (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.

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;
  };
}

Specifiche

Specifica Stato Commento
DOM
The definition of 'Element.closest()' in that specification.
Living Standard Definizione iniziale.

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
closestChrome Full support 41Edge Full support 15Firefox Full support 35IE No support NoOpera Full support 28Safari Full support 6WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 35Opera Android Full support YesSafari iOS Full support 9Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

Note di compatibilità

  • In Edge document.createElement(element).closest(element) restituirà null se l'elemento non è prima collegato al DOM

Vedi anche