diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/web/api/nodelist | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-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.html | 125 | ||||
-rw-r--r-- | files/it/web/api/nodelist/index.html | 124 |
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 && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = function (callback, thisArg) { + thisArg = thisArg || window; + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; +}</pre> + +<p>OPPURE</p> + +<pre class="brush: js">if (window.NodeList && !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 < 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> |