initial commit

1 files changed, 182 insertions, 0 deletions

diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..696b449cb6
--- /dev/null
+++ b/files/it/web/api/element/queryselectorall/index.html
@@ -0,0 +1,182 @@
+---
+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>&lt;p&gt;</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 &gt; 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">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</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>&lt;div&gt;</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>