diff options
Diffstat (limited to 'files/it/web/api/element/queryselectorall/index.html')
| -rw-r--r-- | files/it/web/api/element/queryselectorall/index.html | 182 |
1 files changed, 0 insertions, 182 deletions
diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html deleted file mode 100644 index 696b449cb6..0000000000 --- a/files/it/web/api/element/queryselectorall/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Element.querySelectorAll() -slug: Web/API/Element/querySelectorAll -tags: - - API - - CSS Selectors - - DOM - - Element - - Finding Elements - - Method - - Referenza - - Searching Elements - - Selecting Elements - - Selectors - - querySelector -translation_of: Web/API/Element/querySelectorAll ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo {{domxref("Element")}} <code><strong>querySelectorAll()</strong></code> restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.</p> - -<div class="note"> -<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p> -</div> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> valido; se non lo è, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p> -</div> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p>Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.</p> - -<div class="note"> -<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono un <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, l'elenco restituito è sempre vuoto.</p> -</div> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd> -</dl> - -<h2 id="Esempi">Esempi</h2> - -<h3 id="Ottenere_un_elenco_di_risultati">Ottenere un elenco di risultati</h3> - -<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento <code>"myBox"</code>:</p> - -<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> - -<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di <code>"myBox"</code> con la classe "<code>note</code>" o "<code>alert</code>":</p> - -<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert"); -</pre> - -<p>Qui, otteniamo un elenco degli elementi <code><p></code> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p> - -<pre class="brush: js">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>Questo esempio usa un <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato <code>"data-src"</code>:</p> - -<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> che hanno un attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p> - -<pre class="brush: js">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active='1']");</pre> - -<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3> - -<p>Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà <code>length</code> è 0), non è stata trovata alcuna corrispondenza.</p> - -<p>Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p> - -<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); - -highlightedItems.forEach(function(userItem) { - deleteUser(userItem); -});</pre> - -<div class="note"> -<p><strong>Note: </strong>NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova <code>Array.from(nodeList)</code>.</p> -</div> - -<h2 id="Note_dell'utente">Note dell'utente</h2> - -<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p> - -<h3 id="HTML">HTML</h3> - -<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.</p> - -<pre class="brush: html"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! -</pre> - -<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto il <code><div></code> con la classe <code>"select"</code>, tsi trova ancora l'elemento con la classe <code>".inner"</code>, anche se <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p> - -<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:</p> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0 -</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-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Standard di vita</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>Nessun cambiamento</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Definizione iniziale</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Definizione originale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<div> - - -<p>{{Compat("api.Element.querySelectorAll")}}</p> -</div> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento MDN</li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets per <code>querySelector()</code></a></li> -</ul> |