diff options
Diffstat (limited to 'files/it/web/api/element/closest/index.html')
| -rw-r--r-- | files/it/web/api/element/closest/index.html | 147 |
1 files changed, 0 insertions, 147 deletions
diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html deleted file mode 100644 index cded9f95bb..0000000000 --- a/files/it/web/api/element/closest/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Element.closest() -slug: Web/API/Element/closest -tags: - - API - - DOM - - Element - - Method - - Reference -translation_of: Web/API/Element/closest ---- -<p>{{APIRef('Shadow DOM')}}</p> - -<div>Il metodo <code><strong>closest()</strong></code> dell'interfaccia {{domxref("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 <code>null</code>.</div> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox">var <em>closestElement =</em><em> element</em>.closest(<em>selectors</em>); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<ul> - <li><code>selectors</code> è una {{domxref("DOMString")}} contenente una lista di selettori come <code>"p:hover, .toto + q"</code></li> - <li><code>element</code> è l'{{domxref("Element")}} in cima all'albero degli elementi da trattare.</li> -</ul> - -<h3 id="Valore_del_risultato">Valore del risultato</h3> - -<ul> - <li><code>closestElement</code> è l'{{domxref("Element")}} che è l'antenato più vicino degli elementi selezionati. Può essere <code>null</code>.</li> -</ul> - -<h3 id="Eccezioni">Eccezioni</h3> - -<ul> - <li>{{exception("SyntaxError")}} viene ritornato se i <em>selectors</em> non sono una stringa di elenco di selettori valida.</li> -</ul> - -<h2 id="Esempio">Esempio</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: 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></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">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</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Per i browser che non supportano <code>Element.closest()</code>, ma supportano il supporto per <code>element.matches()</code> (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:</p> - -<pre class="brush: js">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; - }; -}</pre> - -<p>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.</p> - -<pre class="brush: js">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; - }; -} -</pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definizione iniziale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<div> - - -<p>{{Compat("api.Element.closest")}}</p> - -<h3 id="Note_di_compatibilità">Note di compatibilità</h3> - -<ul> - <li>In Edge <code>document.createElement(element).closest(element)</code> restituirà <code>null</code> se l'elemento non è prima collegato al DOM</li> -</ul> -</div> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>L'interfaccia {{domxref("Element")}}.</li> - <li> - <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">La sintassi dei Selettori</a></div> - </li> - <li> - <div class="syntaxbox">Altri metodi che accettano i selettori: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div> - </li> -</ul> |