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, 147 insertions, 0 deletions
diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html new file mode 100644 index 0000000000..cded9f95bb --- /dev/null +++ b/files/it/web/api/element/closest/index.html @@ -0,0 +1,147 @@ +--- +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> |