aboutsummaryrefslogtreecommitdiff
path: root/files/it/web/api/nodelist
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
commitda78a9e329e272dedb2400b79a3bdeebff387d47 (patch)
treee6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/web/api/nodelist
parent1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff)
downloadtranslated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip
initial commit
Diffstat (limited to 'files/it/web/api/nodelist')
-rw-r--r--files/it/web/api/nodelist/foreach/index.html125
-rw-r--r--files/it/web/api/nodelist/index.html124
2 files changed, 249 insertions, 0 deletions
diff --git a/files/it/web/api/nodelist/foreach/index.html b/files/it/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..5d8f5d0088
--- /dev/null
+++ b/files/it/web/api/nodelist/foreach/index.html
@@ -0,0 +1,125 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+tags:
+ - DOM
+ - Iterabile
+ - NodeList
+ - Referenza
+ - Web
+ - metodo
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Il metodo <strong><code>forEach()</code></strong> dell'interfaccia {{domxref("NodeList")}} chiama il callback fornito nel parametro una volta per ogni coppia di valori nell'elenco, in ordine di inserimento.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>NodeList.</em>forEach<em>(callback[, thisArg]);</em>
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione da eseguire per ciascun elemento, eventualmente con 3 argomenti:
+ <dl>
+ <dt><em><code>currentValue</code></em></dt>
+ <dd>L'elemento corrente in elaborazione nella NodeList.</dd>
+ <dt><code><em>currentIndex</em></code></dt>
+ <dd>L'indice dell'elemento corrente in fase di elaborazione nella NodeList.</dd>
+ <dt><em><code>listObj</code></em></dt>
+ <dd>La NodeList a cui viene applicato <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
+ <dd>Valore da utilizzare come {{jsxref("this")}} quando viene eseguito <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref('undefined')}}.</p>
+
+<h2 id="Eccezioni">Eccezioni</h2>
+
+<p><em>Nessuna</em>.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js;highlight:[6]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+ function(currentValue, currentIndex, listObj) {
+ console.log(currentValue + ', ' + currentIndex + ', ' + this);
+ },
+ 'myThisArg'
+);</pre>
+
+<p>ritorna:</p>
+
+<pre>[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Questo {{Glossary("Polyfill","polyfill")}} aggiunge compatibilità a tutti i browser che supportano <a href="https://caniuse.com/#search=es5">ES5</a>:</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = function (callback, thisArg) {
+ thisArg = thisArg || window;
+  for (var i = 0; i &lt; this.length; i++) {
+  callback.call(thisArg, this[i], i, this);
+  }
+ };
+}</pre>
+
+<p>OPPURE</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}</pre>
+
+<p>Il comportamento sopra riportato indica il numero di browser che implementa effettivamente NodeList.prototype.forEach (Chrome, ad esempio).</p>
+
+<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("WebIDL", "#es-forEach", "forEach")}}</td>
+ <td>{{Spec2("WebIDL")}}</td>
+ <td>Definisce <code>forEach</code> sulle dichiarazioni <code>iterable</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/it/web/api/nodelist/index.html b/files/it/web/api/nodelist/index.html
new file mode 100644
index 0000000000..4b18f62d63
--- /dev/null
+++ b/files/it/web/api/nodelist/index.html
@@ -0,0 +1,124 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+ - API
+ - DOM
+ - Interfaccia
+ - NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Gli oggetti <strong><code>NodeList</code></strong> sono un insieme di <a href="https://developer.mozilla.org/it/docs/Glossary/Node/DOM">nodi</a>, di solito restituiti da proprietà come {{domxref("Node.childNodes")}} ed il metodo {{domxref("document.querySelectorAll()")}}.</p>
+
+<div class="note">
+<p>Nonostante <code>NodeList</code> non sia un <code>Array</code>, è possibile iterare su esso usando <code>forEach()</code>. Può anche essere convertito in un vero <code>Array</code> usando <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/from" title="Il metodo Array.from() crea una nuova istanza Array copiata superficialmente da un oggetto simile a un array o iterabile."><code>Array.from()</code></a>.</p>
+
+<p>Tuttavia, alcuni browser meno recenti non hanno implementato <code>NodeList.forEach()</code> né <code>Array.from()</code>. Questo può essere aggirato usando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} — vedi <a href="https://developer.mozilla.org/it/docs/Web/API/NodeList#Esempio">l'esempio</a> di questo documento.</p>
+</div>
+
+<p>In alcuni casi, la <code>NodeList</code> è <em>dinamica</em>, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, {{domxref("Node.childNodes")}} è dinamico:</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // dovrebbe produrre "3"
+</pre>
+
+<p>In altri casi, la <code>NodeList</code> è <em>statica, </em>ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM.<em> </em>{{domxref("document.querySelectorAll()")}} restituisce una <code>NodeList</code> statica.</p>
+
+<p>È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella <code>NodeList</code>, ed in particolare al modo in cui si salva la lunghezza della lista.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd>Il numero dei nodi nella <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>Restituisce un elemento nell'elenco per il suo indice, o <code>null</code> se l'indice è fuori misura.</dd>
+ <dd>Un'alternativa all'accesso a <code>nodeList[i]</code> (che invece restituisce <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> quando <code>i</code> è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>Ritorna un {{jsxref("Iteration_protocols","iterator")}} che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>Esegue una funzione fornita una volta per elemento <code>NodeList</code> passando l'elemento come argomento alla funzione.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>È possibile iterare sugli elementi in una <code>NodeList</code> usando un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; i++) {
+ var item = myNodeList[i]; // La chiamata myNodeList.item(i) non è necessaria in JavaScript
+}
+</pre>
+
+<p><strong>Non utilizzare <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> o <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> per enumerare gli elementi nelle <code>NodeList</code></strong>, poiché enumereranno anche le proprietà <code>length</code> e <code>item</code> e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti {{domxref("element")}}. Inoltre, <code>for..in</code> non garantisce la visita delle proprietà in un particolare ordine.</p>
+
+<p><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> <strong>itererà</strong> sugli oggetti <code>NodeList</code> correttamente:</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+ item.checked = true;
+}</pre>
+
+<p>I browser recenti supportano anche metodi iteratori, {{domxref("NodeList.forEach()", "forEach()")}}, come {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, e {{domxref("NodeList.keys()", "keys()")}}.</p>
+
+<p>Esiste anche un modo compatibile con Internet Explorer {{jsxref("Array.forEach()", "Array.prototype.forEach")}} per l'iterazione.</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+ item.checked = true;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">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', '#interface-nodelist', 'NodeList')}}</td>
+ <td>{{ Spec2('DOM WHATWG') }}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+ <td>{{ Spec2('DOM3 Core') }}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+ <td>{{ Spec2('DOM2 Core') }}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+ <td>{{ Spec2('DOM1') }}</td>
+ <td>
+ <p>Definizione iniziale.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.NodeList")}}</p>