diff options
Diffstat (limited to 'files/it/web/api/document/queryselectorall/index.html')
| -rw-r--r-- | files/it/web/api/document/queryselectorall/index.html | 180 |
1 files changed, 0 insertions, 180 deletions
diff --git a/files/it/web/api/document/queryselectorall/index.html b/files/it/web/api/document/queryselectorall/index.html deleted file mode 100644 index a8e614ce9e..0000000000 --- a/files/it/web/api/document/queryselectorall/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Document.querySelectorAll() -slug: Web/API/Document/querySelectorAll -tags: - - API - - Cercare elementi - - Document - - Localizzare Elementi - - Referenza - - Selettori - - Selettori CSS - - Selezionare Elementi - - Trovare elementi - - metodo - - querySelectorAll -translation_of: Web/API/Document/querySelectorAll ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo {{domxref("Document")}} <code><strong>querySelectorAll()</strong></code> ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.</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 contenere dei <a href="/en-US/docs/Web/CSS/CSS_Selectors">selettori CSS</a> validi; se non lo sono, 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 cercare 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 di backslash, è 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 ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("NodeList")}} vuota in caso di assenza di corrispondenze.</p> - -<div class="note"> -<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono uno <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, l'elenco restituito è sempre vuoto.</p> -</div> - -<h3 id="Eccezioni">Eccezioni</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_elementi">Ottenere un elenco di elementi</h3> - -<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:</p> - -<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> - -<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "<code>note</code>" o "<code>alert</code>":</p> - -<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); -</pre> - -<p>Qui, otteniamo un elenco di elementi <code><p></code> 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 utilizza un <a href="/en-US/docs/Web/CSS/Attribute_selectors">selettore tramite attributo</a> per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato <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> con l'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 che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà <code>length</code> è 0), non è stato trovato alcun elemento.</p> - -<p>Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti 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> - -<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")}} nidificati.</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 <code><div></code> con la classe <code>"select"</code>, si 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, trova solo i selettori corrispondenti 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"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <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.Document.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 di MDN</li> - <li>{{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}</li> - <li>{{domxref("Document.querySelector()")}}</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">Code snippets for <code>querySelector()</code></a></li> -</ul> |