initial commit

30 files changed, 4165 insertions, 0 deletions

diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html
new file mode 100644
index 0000000000..6608e69bd3
--- /dev/null
+++ b/files/it/web/api/element/addeventlistener/index.html
@@ -0,0 +1,694 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/Element/addEventListener
+tags:
+  - API
+  - DOM
+  - EventTarget
+  - Gestori di Eventi
+  - JavaScript
+  - Referenza
+  - Ricevere Eventi
+  - Rilevare Eventi
+  - addEventListener
+  - attachEvent
+  - eventi
+  - metodo
+  - mselementresize
+translation_of: Web/API/EventTarget/addEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">Il metodo {{domxref("EventTarget")}} <code><strong>addEventListener()</strong></code> imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione.</span> I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come <code><a href="/it/docs/DOM/XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<p><code>addEventListener()</code> funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>options</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // Gecko/Mozilla only</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Una stringa sensibile al maiuscolo/minuscolo che rappresenta il <a href="/it/docs/Web/Events">tipo di evento</a> da assegnare.</dd>
+ <dt><code>listener</code></dt>
+ <dd>L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Guida/Functions">funzione</a>. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono:
+ <ul>
+  <li><code>capture</code>: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al <code>listener</code> registrato prima di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM.</li>
+  <li><code>once</code>: Un {{jsxref("Boolean")}} che indica che il <code>listener</code> dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna <code>true</code>, il <code>listener</code> verrebbe automaticamente rimosso quando invocato.</li>
+  <li><code>passive</code>: Un {{jsxref("Boolean")}} che, se <code>true</code>, indica che la funzione specificata da <code>listener</code> non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama <code>preventDefault()</code>, l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.</li>
+  <li>{{non-standard_inline}} <code>mozSystemGroup</code>: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al <code>listener</code> registrato <em>prima</em> di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> e <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> per una spiegazione dettagliata. Se non specificato, <code>useCapture</code> di default è <code>false</code>.</dd>
+ <dd>
+ <div class="note"><strong>Note:</strong> Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro <code>useCapture</code>.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>Un parametro specifico per Firefox (Gecko). Se è <code>true</code>, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è <code>false</code> per il browser {{glossary("chrome")}} e <code>true</code> per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<h3 id="Il_callback_del_listener_di_eventi">Il callback del listener di eventi</h3>
+
+<p>Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.</p>
+
+<p>La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo <code>handleEvent()</code> cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.</p>
+
+<p>Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:</p>
+
+<pre class="brush: js">function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}</pre>
+
+<h3 id="Rilevamento_sicuro_del_supporto_opzionale">Rilevamento sicuro del supporto opzionale</h3>
+
+<p>Nelle versioni precedenti della specifica DOM, il terzo parametro di <code>addEventListener()</code> era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.</p>
+
+<p>Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.</p>
+
+<p>Ad esempio, se si desidera verificare l'opzione <code>passive</code>:</p>
+
+<pre class="brush: js">var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+</pre>
+
+<p>Questo crea un oggetto <code>options</code> con una funzione getter per la proprietà <code>passive</code>; il getter imposta una flag, <code>passiveSupported</code>, è <code>true</code> se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà <code>passive</code> sull'oggetto <code>options</code>, <code>passiveSupported</code> sarà impostato su <code>true</code>; altrimenti rimarrà <code>false</code>. Chiamiamo quindi <code>addEventListener()</code> per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo <code>removeEventListener()</code> per pulire dopo noi stessi. (Nota che <code>handleEvent()</code> viene ignorato sui listener di eventi che non vengono chiamati.)</p>
+
+<p>Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.</p>
+
+<p>Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:</p>
+
+<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento <code>someElement</code>. Per il terzo parametro, se <code>passiveSupported</code> è <code>true</code>, stiamo specificando un oggetto <code>options</code> con <code>passive</code> impostato su <code>true</code>; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo <code>false</code> come valore del parametro <code>useCapture</code>.</p>
+
+<p>Se preferisci, puoi usare una libreria di terze parti come <a href="https://modernizr.com/docs">Modernizr</a> o <a href="https://github.com/rafrex/detect-it">Detect It</a> per fare questo test per te.</p>
+
+<p>È possibile ottenere ulteriori informazioni dall'articolo su <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> dal gruppo di <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Aggiungere_un_semplice_listener">Aggiungere un semplice listener</h3>
+
+<p>Questo esempio dimostra come utilizzare <code>addEventListener()</code> per controllare i click del mouse su un elemento.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>In questo codice, <code>modifyText()</code> è un listener per gli eventi <code>click</code> registrati usando <code>addEventListener()</code>. Un click in qualsiasi punto della tabella esegue il gestore ed esegue <code>modifyText()</code>.</p>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}</p>
+
+<h3 id="Listener_di_eventi_con_funzione_anonima">Listener di eventi con funzione anonima</h3>
+
+<p>Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+</pre>
+
+<p>Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione <code>modifyText()</code>, che è responsabile per rispondere effettivamente all'evento.</p>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}</p>
+
+<h3 id="Listener_di_eventi_con_una_funzione_a_freccia">Listener di eventi con una funzione a freccia</h3>
+
+<p>Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);
+</pre>
+
+<h4 id="Risultato_3">Risultato</h4>
+
+<p>{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}</p>
+
+<p>Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti <code>this</code>. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti <code>this</code>, le funzioni a freccia ereditano il vincolo <code>this</code> della funzione di contenimento.</p>
+
+<p>Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.</p>
+
+<h3 id="Esempio_di_utilizzo_delle_opzioni">Esempio di utilizzo delle opzioni</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+    outer, once &amp; none-once
+    &lt;div class="middle" target="_blank"&gt;
+        middle, capture &amp; none-capture
+        &lt;a class="inner1" href="https://www.mozilla.org" target="_blank"&gt;
+            inner1, passive &amp; preventDefault(which is not allowed)
+        &lt;/a&gt;
+        &lt;a class="inner2" href="https://developer.mozilla.org/" target="_blank"&gt;
+            inner2, none-passive &amp; preventDefault(not open new page)
+        &lt;/a&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js">    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+</pre>
+
+<h4 id="Risultato_4">Risultato</h4>
+
+<p>Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.</p>
+
+<p>{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p>Prima di utilizzare un particolare valore nell'oggetto <code>options</code> è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.</p>
+
+<h2 id="Altre_note">Altre note</h2>
+
+<h3 id="Perchè_usare_addEventListener">Perchè usare <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener()</code> è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:</p>
+
+<ul>
+ <li>Permette di aggiungere più di un singolo gestore per un evento. Ciò è particolarmente utile per le librerie {{Glossary("AJAX")}} i moduli JavaScript o qualsiasi altro tipo di codice che deve funzionare bene con altre librerie / estensioni.</li>
+ <li>Ti dà il controllo più fine della fase quando l'ascoltatore è attivato (capturing vs. bubbling).</li>
+ <li>Funziona su qualsiasi elemento del DOM, non solo sugli elementi HTML.</li>
+</ul>
+
+<p>Il modo alternativo, <a href="#Il_modo_più_antico_per_registrare_i_listeners">più vecchio per registrare i listener</a>, è descritto di seguito.</p>
+
+<h3 id="Aggiunta_di_un_listener_durante_la_spedizione_dell'evento">Aggiunta di un listener durante la spedizione dell'evento</h3>
+
+<p>Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.</p>
+
+<h3 id="Più_listeners_identici">Più listeners identici</h3>
+
+<p>Se più <code>EventListener</code> indentici sono registrati sullo stesso <code>EventTarget</code> con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'<code>EventListener</code> da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi <a href="#Problemi_di_memoria">Problemi di memoria</a> di seguito.)</p>
+
+<h3 id="Il_valore_di_this_all'interno_del_gestore">Il valore di <code>this</code> all'interno del gestore</h3>
+
+<p>È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.</p>
+
+<p>Se si collega un handler ad un elemento utilizzando <code>addEventListener()</code>, il valore di <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">this</a></code> all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà <code>currentTarget</code> dell'argomento evento che viene passato al gestore.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+</pre>
+
+<p>Come promemoria, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">le funzioni freccia non hanno il loro <code>this</code> contesto</a>.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})</pre>
+
+<p>Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di <code>this</code> in modo coerente con <code>addEventListener()</code>; un'occorrenza di <code>this</code> all'interno del codice rappresenta un riferimento all'elemento.</p>
+
+<pre class="brush: html">&lt;table id="my_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` refers to the table; logs 'my_table' --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Si noti che il valore di <code>this</code> all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">regole standard</a>. Questo è mostrato nel seguente esempio:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  function logID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="my_table" onclick="logID();"&gt;&lt;!-- when called, `this` will refer to the global object --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Il valore di <code>this</code> all'interno di <code>logID()</code> è un riferimento all'oggetto globale {{domxref("Window")}} (o <code>undefined</code> nel caso della <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>).</p>
+
+<h4 id="Specificare_this_usando_bind()">Specificare <code>this</code> usando <code>bind()</code></h4>
+
+<p>Il metodo <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> consente di specificare il valore che dovrebbe essere usato come <code>this</code> per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà <code>this</code> a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.</p>
+
+<p>Questo è un esempio con e senza <code>bind()</code>:</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+</pre>
+
+<p>Un'altra soluzione sta utilizzando una funzione speciale chiamata <code>handleEvent()</code> per catturare qualsiasi evento:</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+</pre>
+
+<p>Un altro modo di gestire il riferimento a <em>this </em>è passare ad <code>EventListener</code> una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:</p>
+
+<pre class="brush: js">class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();</pre>
+
+<h3 id="Legacy_Internet_Explorer_e_attachEvent">Legacy Internet Explorer e attachEvent</h3>
+
+<p>Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard <code>addEventListener()</code>. Per IE, modifichiamo l'esempio precedente per:</p>
+
+<pre class="brush: js">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>C'è un inconveniente di <code>attachEvent()</code>: il valore di <code>this</code> sarà un riferimento all'oggetto <code>window</code>, invece dell'elemento su cui è stato chiamato.</p>
+
+<p>Il metodo <code>attachEvent()</code> potrebbe essere associato all'evento <code>onresize</code> per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario <code>mselementresize</code> quando abbinato al metodo <code>addEventListener</code> di registrazione dei gestori di eventi, fornisce funzionalità simili a <code>onresize</code>, attivando quando alcuni elementi HTML vengono ridimensionati.</p>
+
+<h3 id="Compatibilità">Compatibilità</h3>
+
+<p>Puoi lavorare attorno a <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di <code>handleEvent()</code> e anche l'evento {{event("DOMContentLoaded")}}.</p>
+
+<div class="note">
+<p><strong>Note: </strong><code>useCapture</code> non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.</p>
+</div>
+
+<pre class="brush: js">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Il_modo_più_antico_per_registrare_i_listeners">Il modo più antico per registrare i listeners</h3>
+
+<p><code>addEventListener()</code> è stato introdotto con la specifica DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Prima di allora, gli ascoltatori di eventi sono stati registrati come segue</a>:</p>
+
+<pre class="brush: js">// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+</pre>
+
+<p>Questo metodo sostituisce il listener dell'evento <code>click</code> esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come <code>blur</code> (<code>onblur</code>) e <code>keypress</code> (<code>onkeypress</code>) si comportano in modo simile.</p>
+
+<p>Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di <code>addEventListener()</code>.</p>
+
+<h3 id="Problemi_di_memoria">Problemi di memoria</h3>
+
+<pre class="brush: js">var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i &lt; els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i &lt; els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+</pre>
+
+<p>Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire <code>myElement.removeEventListener("click", processEvent, false)</code> perchè <code>processEvent</code> è il riferimento alla funzione.</p>
+
+<p>In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).</p>
+
+<p>Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.</p>
+
+<pre class="brush: js">// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i &lt; els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i &lt; els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}</pre>
+
+<h3 id="Miglioramento_delle_prestazioni_di_scorrimento_con_i_listeners_passivi">Miglioramento delle prestazioni di scorrimento con i listeners passivi</h3>
+
+<p>Secondo la specifica, il valore predefinito per l'opzione <code>passive</code> è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.</p>
+
+<p>Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione <code>passive</code> in <code>true</code> per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.</p>
+</div>
+
+<p>Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di <code>passive</code> a <code>false</code>, come mostrato qui:</p>
+
+<pre class="brush: js">/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+</pre>
+
+<p>Nei browser meno recenti che non supportano il parametro <code>options</code> su <code>addEventListener()</code>, il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento <code>useCapture</code> senza utilizzare correttamente il <a href="#Safely_detecting_option_support">rilevamento delle funzionalità</a>.</p>
+
+<p>Non è necessario preoccuparsi del valore di <code>passive</code> per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specificazione</th>
+   <th>Stato</th>
+   <th>Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definizione inziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creazione e attivazione di eventi personalizzati</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">Maggiori dettagli sull'uso di <code>this</code> nei gestori di eventi</a></li>
+</ul>
diff --git a/files/it/web/api/element/attributes/index.html b/files/it/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..5bd14f3e4b
--- /dev/null
+++ b/files/it/web/api/element/attributes/index.html
@@ -0,0 +1,120 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - Attributi
+  - DOM
+  - Element
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La proprietà <strong><code>Element.attributes</code></strong> restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un <code>Array</code>, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, <code>attributes</code> è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<h3 id="Esempi_basilari">Esempi basilari</h3>
+
+<pre class="brush: js">// Ottenere il primo elemento &lt;p&gt; nel documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">Enumerazione degli attributi degli elementi</h3>
+
+<p>L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.<br>
+ L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</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-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, l'interfaccia dell'oggetto restituito</li>
+ <li>Considerazioni sulla compatibilità con ross-browser: su <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>
diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html
new file mode 100644
index 0000000000..f56bcc4380
--- /dev/null
+++ b/files/it/web/api/element/childnodes/index.html
@@ -0,0 +1,99 @@
+---
+title: Node.childNodes
+slug: Web/API/Element/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La proprietà di sola lettura <code><strong>Node.childNodes</strong></code> restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_semplice">Utilizzo semplice</h3>
+
+<pre class="brush:js">// parg è un riferimento a un elemento &lt;p&gt;
+
+// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i &lt; children.length; i++) {
+    // fare qualcosa con ogni bambino da children[i]
+    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
+  }
+}</pre>
+
+<h3 id="Rimuovi_tutti_i_bambini_da_un_nodo">Rimuovi tutti i bambini da un nodo</h3>
+
+<pre class="brush:js">// Questo è un modo per rimuovere tutti i bambini da una
+// finestra di nodo è un riferimento ad un oggetto
+
+while (box.firstChild) {
+    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p>Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio <code>elementNodeReference.childNodes[1].nodeName</code> per ottenere il nome, ecc.).</p>
+
+<p>L'oggetto <code>document</code> ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere <code>documentElement</code>. (Nei documenti (X)HTML questo è l'elemento <code>HTML</code>.)</p>
+
+<p><code>childNodes</code> include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.</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('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.childNodes")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.firstChild")}}</li>
+ <li>{{domxref("Node.lastChild")}}</li>
+ <li>{{domxref("Node.nextSibling")}}</li>
+ <li>{{domxref("Node.previousSibling")}}</li>
+ <li>{{domxref("ParentNode.children")}}</li>
+</ul>
diff --git a/files/it/web/api/element/classlist/index.html b/files/it/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..3d86fa8400
--- /dev/null
+++ b/files/it/web/api/element/classlist/index.html
@@ -0,0 +1,288 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - DOM
+  - Element
+  - Proprietà
+  - Read-only
+  - Referenza
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà <code><strong>Element.classList</strong></code> di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.</p>
+
+<p>L'utilizzo di <code>classList</code> è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di <em>elementNodeReference</em>. Se l'attributo class non è stato impostato o è vuoto <em>elementClasses.length</em> ritorna <code>0</code>. <code>element.classList</code> è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi <code>add()</code> e <code>remove()</code>.</p>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt><code>add( String [, String [, ...]] )</code></dt>
+ <dd>Aggiunge le classi specificate. Se queste classi esistono già nell'attributo <code>class</code> dell'elemento, vengono ignorate.</dd>
+ <dt><code>remove( String [, String [, ...]] )</code></dt>
+ <dd>
+ <p>Rimuove le classi specificate.</p>
+
+ <div class="note"><strong>Nota:</strong> La rimozione di una classe inesistente NON genera un errore.</div>
+ </dd>
+ <dt><code><strong>item</strong>( Number )</code></dt>
+ <dd>Restituisce il valore della classe per indice nella collezione.</dd>
+ <dt><code><strong>toggle</strong>( String [, force] )</code></dt>
+ <dd>Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce <code>false</code>, altrimenti, la aggiunge e restituisce <code>true</code>.<br>
+ <br>
+ Quando è presente un secondo argomento: Se il secondo argomento restituisce <code>true</code>, aggiunge la classe specificata; se restituisce <code>false</code>, la rimuove.</dd>
+ <dt><code>contains( String )</code></dt>
+ <dd>Verifica se il valore di classe specificato esiste nell'attributo <code>class</code> dell'elemento.</dd>
+ <dt><code>replace( vecchiaClasse, nuovaClasse )</code></dt>
+ <dd>Sostituisce una classe esistente con una nuova classe.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">const div = document.createElement('div');
+div.className = 'foo';
+
+// il nostro stato iniziale: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// usare l'API classList per rimuovere e aggiungere classi
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// se visible è impostato rimuovilo, altrimenti aggiungilo
+div.classList.toggle("visible");
+
+// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10
+div.classList.toggle("visible", i &lt; 10 );
+
+console.log(div.classList.contains("foo"));
+
+// aggiungere o rimuovere più classi
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// aggiungere o rimuovere più classi utilizzando la spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// sostituire la classe "foo" con la classe "bar"
+div.classList.replace("foo", "bar");</pre>
+
+<div class="note">
+<p>Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014" rel="noopener">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<dl>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>L'evento legacy <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> può essere utilizzato per creare un mockup dinamico di <code>classList</code> dinamico grazie alla proprietà <code>Element.prototype.className</code> che attiva l'evento specificato una volta modificato.</p>
+
+<p>Il seguente polyfill sia per <code>classList</code> che per <code>DOMTokenList</code> garantisce <strong>la piena</strong> conformità (copertura) per tutti i metodi e le proprietà standard di <code>Element.prototype.classList</code> per i browser <strong>IE10-IE11</strong> oltre ad un comportamento <em>quasi</em> conforme per <strong>IE 6-9</strong>. Controlla:</p>
+
+<pre class="brush: js">// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Avvertenze">Avvertenze</h3>
+
+<p>Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da <code>document.createElement</code> prima di essere appesi su un nodo padre) in IE6-7.</p>
+
+<p>Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di <code>classList</code> e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.</p>
+
+<p>Una nota minore è che in IE6-7, questo polyfill usa la proprietà <code>window[" uCL"]</code> sull'oggetto window per comunicare con le espressioni CSS, la proprietà css <code>x-uCLp</code> su tutti gli elementi e la proprietà <code>element[" uCL"]</code> su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva <code>element[" uCLp"]</code> viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà <code>DOMTokenList[" uCL"]</code> viene aggiunta ad ogni oggetto <code>element["classList"]</code> per garantire che la DOMTokenList sia limitata al proprio elemento.</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("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html
new file mode 100644
index 0000000000..ca463f5f75
--- /dev/null
+++ b/files/it/web/api/element/classname/index.html
@@ -0,0 +1,84 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà <code><strong>className</strong></code> dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore <a href="/en-US/docs/Web/HTML/Global_attributes/class">dell'attributo <code>class</code></a> dell'elemento specificato.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><code>cName</code> è una variabile stringa che rappresenta le classi o le classi separate dallo spazio dell'elemento corrente.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p>Il nome <code>className</code> viene utilizzato per questa proprietà anziché <code>class</code> a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.</p>
+
+<p><code>className</code> può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se <code>element</code> è un {{domxref("SVGElement")}}. È meglio ottenere/impostare <code>className</code> di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> anzichè <code>""</code> se <code>element</code> ha un <a href="/en-US/docs/Web/HTML/Global_attributes/class">attributo <code>class</code></a> vuoto.</p>
+
+<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>
+
+<div class="note">
+<p><code>class</code> è un <strong>Attributo</strong> <strong>HTML</strong>, mentre <code>className</code> è una <strong>proprietà del DOM</strong>.</p>
+</div>
+
+<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-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.className")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..167dd00ca3
--- /dev/null
+++ b/files/it/web/api/element/clientheight/index.html
@@ -0,0 +1,36 @@
+---
+title: element.clientHeight
+slug: Web/API/Element/clientHeight
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.</p>
+<p><code>clientHeight</code> può essere calcolato come CSS <code>height</code> + CSS <code>padding</code> - altezza della barra di scorrimento orizzontale(se presente).</p>
+<h3 id="Sintassi_e_valori" name="Sintassi_e_valori">Sintassi e valori</h3>
+<pre class="eval">var <var>altezza</var> = <var>elemento</var>.clientHeight;
+</pre>
+<p><var>altezza</var> è un numero intero che rappresenta l'altezza in pixel di <var>elemento</var>.</p>
+<p><code>clientHeight</code> è di sola lettura.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientHeight.png"></p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non fa parte di nessuna specifica W3C.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>clientHeight</code> è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.</p>
+<h3 id="Riferimenti" name="Riferimenti">Riferimenti</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li>
+ <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}</p>
diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html
new file mode 100644
index 0000000000..cded9f95bb
--- /dev/null
+++ b/files/it/web/api/element/closest/index.html
@@ -0,0 +1,147 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/closest
+---
+<p>{{APIRef('Shadow DOM')}}</p>
+
+<div>Il metodo <code><strong>closest()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce <code>null</code>.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>closestElement =</em><em> element</em>.closest(<em>selectors</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>selectors</code> è una {{domxref("DOMString")}} contenente una lista di selettori come <code>"p:hover, .toto + q"</code></li>
+ <li><code>element</code> è l'{{domxref("Element")}} in cima all'albero degli elementi da trattare.</li>
+</ul>
+
+<h3 id="Valore_del_risultato">Valore del risultato</h3>
+
+<ul>
+ <li><code>closestElement</code> è l'{{domxref("Element")}} che è l'antenato più vicino degli elementi selezionati. Può essere <code>null</code>.</li>
+</ul>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} viene ritornato se i <em>selectors</em> non sono una stringa di elenco di selettori valida.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso
+
+var r3 = el.closest("article &gt; div");
+// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01
+
+var r4 = el.closest(":not(div)");
+// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Per i browser che non supportano <code>Element.closest()</code>,  ma supportano il supporto per <code>element.matches()</code> (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:</p>
+
+<pre class="brush: js">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p>Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</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-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="Note_di_compatibilità">Note di compatibilità</h3>
+
+<ul>
+ <li>In Edge <code>document.createElement(element).closest(element)</code> restituirà <code>null</code> se l'elemento non è prima collegato al DOM</li>
+</ul>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>L'interfaccia {{domxref("Element")}}.</li>
+ <li>
+  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">La sintassi dei Selettori</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Altri metodi che accettano i selettori: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html
new file mode 100644
index 0000000000..b5052f5dfe
--- /dev/null
+++ b/files/it/web/api/element/firstchild/index.html
@@ -0,0 +1,90 @@
+---
+title: Node.firstChild
+slug: Web/API/Element/firstChild
+tags:
+  - API
+  - DOM
+  - Node
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Node/firstChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.firstChild</strong></code> restituisce il primo figlio del nodo nell'albero o <code>null</code> se il nodo non ha figli.</span> Se il nodo è un <code>Document</code>, restituisce il primo nodo nell'elenco dei suoi figli diretti.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
+</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Questo esempio dimostra l'uso di <code>firstChild</code> e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script&gt;
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+&lt;/script&gt;</pre>
+
+<p>In quanto sopra, la <a href="/en-US/docs/Web/API/Console">console</a> console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <code>&lt;p&gt;</code> e <code>&lt;span&gt;</code>. <strong>Qualsiasi</strong> <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">spazio bianco</a> creerà un nodo <code>#text</code> da un singolo spazio a più spazi, ritorni, schede e così via.</p>
+
+<p>Un altro nodo <code>#text</code> viene inserito tra i tag di chiusura <code>&lt;/span&gt;</code> e <code>&lt;/p&gt;</code>.</p>
+
+<p>Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script&gt;
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+&lt;/script&gt;
+</pre>
+
+<p>Ora l'avviso mostrerà 'SPAN'.</p>
+
+<p>Per evitare il problema con <code>node.firstChild</code> che restituisce i nodi <code>#text</code> o <code>#comment</code>, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, <code>node.firstElementChild</code> richiede uno shim per Internet Explorer 9 e versioni precedenti.</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">Commentp</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.firstChild")}}</p>
diff --git a/files/it/web/api/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..e10427e5bd
--- /dev/null
+++ b/files/it/web/api/element/getattribute/index.html
@@ -0,0 +1,48 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><code>getAttribute()</code> restituisce il valore di un attributo specificato sull'elemento.</span> Se l'attributo specificato non esiste, il valore restituito sarà <code>null</code> o <code>""</code> (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>var attributo</em> = element.getAttribute(<em>attributeName</em>);
+</pre>
+
+<p>dove</p>
+
+<ul>
+ <li><code><em>attributo</em></code> è una stringa contenente il valore di <code><em>attributeName</em></code>.</li>
+ <li><code><em>attributeName</em></code> è il nome dell'attributo di cui si desidera ottenere il valore.</li>
+</ul>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">let div1 = document.getElementById('div1');
+let align = div1.getAttribute('align');
+
+alert(align); // Mostra il valore di "align" per l'elemento con id="div1"</pre>
+
+<h2 id="Notes" name="Notes">Appunti</h2>
+
+<p>Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, <code>getAttribute()</code> converte in minuscolo il suo argomento prima di procedere.</p>
+
+<p>Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono <code>null</code> quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">l'attuale bozza della specifica DOM</a> specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la <em>stringa vuota</em>, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare <code>getAttribute()</code> se è possibile che l'attributo richiesto non esista sull'elemento specificato.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.getAttribute")}}</p>
+</div>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introdotto in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..9239135259
--- /dev/null
+++ b/files/it/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.getElementsByTagName()
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Referenza
+translation_of: Web/API/Element/getElementsByTagName
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">Il metodo <code><strong>Element.getElementsByTagName()</strong></code> ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il <a href="/it/docs/Web/API/Element/tagName">tag name</a> specificato.</span> Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è <em>dinamico</em>, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare <code>Element.getElementsByTagName()</code> con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.</p>
+
+<p>Quando viene chiamato su un elemento HTML in un documento HTML, <code>getElementsByTagName</code> converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <code><a href="/en-US/docs/Web/SVG/Element/linearGradient">&lt;linearGradient&gt;</a></code>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.</p>
+
+<p><code>Element.getElementsByTagName</code> è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code> è una {{domxref("HTMLCollection")}} <em>dinamica</em> di elementi con un nome di tag corrispondente, nell'ordine in cui appaiono. Se non vengono trovati elementi, la <code>HTMLCollection</code> è vuota.</li>
+ <li><code>element</code> è l'elemento da cui inizia la ricerca. Sono inclusi solo i discendenti dell'elemento, non l'elemento stesso.</li>
+ <li><code>tagName</code> è il nome qualificato da cercare. La stringa speciale <code>"*"</code> rappresenta tutti gli elementi. Per compatibilità con XHTML, è necessario scriverlo in minuscolo.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">// Controlla lo stato di ogni cella in una tabella
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
+
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // Prendi i dati
+  }
+}
+</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-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.getElementsByTagName")}}</p>
diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..4cd6d2a9d2
--- /dev/null
+++ b/files/it/web/api/element/hasattribute/index.html
@@ -0,0 +1,75 @@
+---
+title: Element.hasAttribute()
+slug: Web/API/Element/hasAttribute
+translation_of: Web/API/Element/hasAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <strong><code>Element.hasAttribute()</code></strong> restituisce un valore <strong>booleano</strong> che indica se l'elemento specificato ha o meno l'attributo specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var <em>risultato</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
+</pre>
+
+<dl>
+ <dt><code>risultato</code></dt>
+ <dd>detiene il valore di ritorno <code>true</code> o <code>false</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>è una stringa che rappresenta il nome dell'attributo.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // fare qualcosa
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &amp;&amp;
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<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-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.hasAttribute")}}</p>
diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..ca408ca96d
--- /dev/null
+++ b/files/it/web/api/element/hasattributes/index.html
@@ -0,0 +1,28 @@
+---
+title: element.hasAttributes
+slug: Web/API/Element/hasAttributes
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Element/hasAttributes
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un valore booleano: <code>true</code> se l'elemento ha un qualunque numero di attributi, altrimenti <code>false</code>.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<p>
+ <i>
+  bool</i>
+ = element.hasAttributes()</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>t1 = document.getElementById("tabella-dati");
+if (t1.hasAttributes()) {
+    // fai qualcosa con
+    // t1.attributes
+}
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes </a></p>
+<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}</p>
diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html
new file mode 100644
index 0000000000..f518252bc7
--- /dev/null
+++ b/files/it/web/api/element/index.html
@@ -0,0 +1,475 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Referenza
+  - Referenza del DOM
+  - Web API
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Element</code></strong> è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da <code>Element</code>.</span> Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.</p>
+
+<p>Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia <code>XULElement</code>, implementano anche  <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">Proprietà</h2>
+
+<p><em>Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>e {{DOMxRef("Animatable")}}.</p>
+
+<dl>
+ <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.</dd>
+ <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.className")}}</dt>
+ <dd>È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd>
+ <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd>
+ <dt>{{DOMxRef("Element.id")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd>
+ <dt>{{DOMxRef("Element.innerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{DOMxRef("Element.outerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollTop")}}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd>
+ <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h3 id="Proprietà_incluse_da_Slotable">Proprietà incluse da Slotable</h3>
+
+<p><em>L'interfaccia <code>Element</code> include la seguente proprietà, definita nel  mixin {{DOMxRef("Slotable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Gestori di eventi</h3>
+
+<dl>
+ <dt>{{domxref("Element.onfullscreenchange")}}</dt>
+ <dd>Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.</dd>
+ <dt>{{domxref("Element.onfullscreenerror")}}</dt>
+ <dd>Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.</dd>
+</dl>
+
+<h4 id="Gestori_di_eventi_obsoleti">Gestori di eventi obsoleti</h4>
+
+<dl>
+ <dt>{{DOMxRef("Element.onwheel")}}</dt>
+ <dd>Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. <strong>Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Metodi</h2>
+
+<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
+ <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
+ <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{DOMxRef("Element.querySelector()")}}</dt>
+ <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
+ <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd>
+ <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+ <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt>
+ <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Fired when the document view or an element has been scrolled.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Fired when some text has been selected.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd>
+</dl>
+
+<h3 id="Composition_events">Composition events</h3>
+
+<dl>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Fired when an element is about to gain focus.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Fired when an element is about to lose focus.</dd>
+</dl>
+
+<h3 id="Fullscreen_events">Fullscreen events</h3>
+
+<dl>
+ <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
+ <dd>Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.<br>
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.</dd>
+ <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
+ <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.<br>
+ Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.</dd>
+</dl>
+
+<h3 id="Mouse_events">Mouse events</h3>
+
+<dl>
+ <dt>{{domxref("Element/Activate_event", "Activate")}}</dt>
+ <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.</dd>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Fired when the user attempts to open a context menu.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Fired when a pointing device button is pressed on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Fired when a pointing device button is released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd>
+</dl>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<dl>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Fired when one or more touch points are removed from the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Fired when one or more touch points are moved along the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Fired when one or more touch points are placed on the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd>
+</dl>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<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("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Aggiunto il metodo <code>getAnimations()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Aggiunge le proprietà <code>undoScope</code> e <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> e <code>onlostpointercapture</code>.<br>
+    Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Aggiunti i seguenti metodi: <code>querySelector()</code> e <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Aggiunto il metodo <code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Aggiunto il metodo <code>requestFullscreen()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Aggiunte le seguenti proprietà: <code>innerHTML</code>, e <code>outerHTML</code>.<br>
+    Aggiunti i seguenti metodi: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Aggiunte le seguenti proprietà: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Aggiunti i seguenti metodi: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Aggiunti i seguenti metodi: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br>
+    Spostato <code>hasAttributes()</code> dall'interfaccia <code>Node</code> a questa.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Rimossi i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Modificato il valore di ritorno di <code>getElementsByTagName()</code> e <code>getElementsByTagNameNS()</code>.<br>
+    Rimossa la proprietà <code>schemaTypeInfo</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aggiunti i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.<br>
+    Aggiunta la proprietà <code>schemaTypeInfo</code>. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Il metodo <code>normalize()</code> è stato spostato su {{DOMxRef("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..6fbdb3c47b
--- /dev/null
+++ b/files/it/web/api/element/innerhtml/index.html
@@ -0,0 +1,213 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+tags:
+  - API
+  - DOM
+  - DOM Parsing
+  - Element
+  - Parsing HTML
+  - Proprietà
+  - Referenza
+  - innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà {{domxref("Element")}} <strong><code>innerHTML</code></strong> ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.</span></p>
+
+<div class="note"><strong>Note: </strong>Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri <code>(&amp;)</code>, <code>(&lt;)</code>, o <code>(&gt;)</code>, <code>innerHTML</code> restituisce questi caratteri come entità HTML <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> e <code>"&amp;gt;"</code> rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.</div>
+
+<p>Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di <code>innerHTML</code> rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa <var>htmlString</var>.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>È stato effettuato un tentativo di impostare il valore di <code>innerHTML</code> utilizzando una stringa che non è HTML correttamente formato.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>La proprietà <code>innerHTML</code> può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.</p>
+
+<h3 id="Leggere_i_contenuti_HTML_di_un_elemento">Leggere i contenuti HTML di un elemento</h3>
+
+<p>La lettura di <code>innerHTML</code> fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.</p>
+
+<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+
+<p>Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.</p>
+</div>
+
+<h3 id="Sostituzione_del_contenuto_di_un_elemento">Sostituzione del contenuto di un elemento</h3>
+
+<p>L'impostazione del valore di <code>innerHTML</code> consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.</p>
+
+<p>Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:</p>
+
+<pre class="brush: js">document.body.innerHTML = "";</pre>
+
+<p>Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri <code>"&lt;"</code> con l'entità HTML <code>"&amp;lt;"</code>, convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di <code>innerHTML</code> viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.</p>
+
+<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Dettagli_operativi">Dettagli operativi</h4>
+
+<p>Cosa succede esattamente quando imposti il valore di <code>innerHTML</code>? In questo modo, l'user agent deve seguire questi passaggi:</p>
+
+<ol>
+ <li>Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.</li>
+ <li>Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <code>&lt;template&gt;</code> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo <code>DocumentFragment</code> creato nel passaggio 1.</li>
+ <li>Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo <code>DocumentFragment</code>.</li>
+</ol>
+
+<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3>
+
+<p>Non è raro vedere <code>innerHTML</code> utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.</p>
+
+<pre class="brush: js">const name = "John";
+// supponiamo che 'el' sia un elemento DOM HTML
+el.innerHTML = name; // innocuo in questo caso
+
+// ...
+
+name = "&lt;script&gt;alert('Sono John in una noiosa allerta!')&lt;/script&gt;";
+el.innerHTML = name; // innocuo in questo caso</pre>
+
+<p>Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">non deve essere eseguito</a>.</p>
+
+<p>Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi <code>innerHTML</code> per impostare le stringhe su cui non si ha il controllo. Per esempio:</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // mostra l'alert</pre>
+
+<p>Per questo motivo, si consiglia di non utilizzare <code>innerHTML</code> quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando <code>innerHTML</code> molto probabilmente il tuo codice verrà rifiutato. Ad esempio, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">se utilizzi <code>innerHTML</code></a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">un'estensione del browser</a> e si invia l'estensione a <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, non verrà passato il processo di revisione automatica.</p>
+</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>In questo esempio viene utilizzato <code>innerHTML</code> per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Registrazione degli eventi del mouse in questo contenitore...");
+</pre>
+
+<p>La funzione <code>log()</code> crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe <code>"log"</code>.</p>
+
+<p>Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):</p>
+
+<pre class="brush: js">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:</p>
+
+<pre class="brush: js">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>L'HTML è abbastanza semplice per il nostro esempio.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Il {{HTMLElement("div")}} con la classe <code>"box"</code> è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <code>&lt;div&gt;</code> la cui classe è <code>"log"</code> è il contenitore per il testo del log stesso.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>I seguenti stili CSS del nostro contenuto di esempio.</p>
+
+<pre class="brush: css">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.</p>
+
+<p>{{EmbedLiveSample("Esempio", 640, 350)}}</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('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.innerHTML")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} e {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>Parsificare HTML in un albero del DOM: {{domxref("DOMParser")}}</li>
+ <li>Serializzare di XML o HTML in un albero del DOM: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..f69fbb1daf
--- /dev/null
+++ b/files/it/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,102 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - API
+  - Cambiare il DOM
+  - DOM
+  - Element
+  - HTML
+  - Inserire elementi
+  - Inserire nodi
+  - Referenza
+  - insertAdjacentHTML
+  - metodo
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <strong><code>insertAdjacentHTML()</code></strong> dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad <code>element</code>; deve essere una delle seguenti stringhe:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: Davanti ad <code>element</code> stesso.</li>
+  <li><code style="color: green;">'afterbegin'</code>: Appena dentro <code>element</code>, prima del suo primo figlio.</li>
+  <li><code style="color: blue;">'beforeend'</code>: Appena dentro <code>element</code>, prima del suo ultimo figlio.</li>
+  <li><code style="color: magenta;">'afterend'</code>: Dopo ad <code>element</code> stesso.</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>La stringa da analizzare come HTML o XML e inserita nell'albero.</dd>
+</dl>
+
+<h3 id="Visualizzazione_dei_nomi_delle_posizioni">Visualizzazione dei nomi delle posizioni</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note: </strong> Le posizioni <code>beforebegin</code> e <code>afterend</code> funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// A questo punto, la nuova struttura è:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Note">Note</h2>
+
+<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3>
+
+<p>Quando si inserisce HTML in una pagina utilizzando <code>insertAdjacentHTML()</code>, fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.</p>
+
+<p>Non è consigliabile utilizzare  <code>insertAdjacentHTML()</code> quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</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('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("XMLSerializer")}}: Costruire una rappresentazione DOM del testo XML</li>
+ <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> di Henri Sivonen, incluso benchmark che mostra che insertAdjacentHTML può essere molto più veloce in alcuni casi.</span></li>
+</ul>
diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html
new file mode 100644
index 0000000000..2030226b37
--- /dev/null
+++ b/files/it/web/api/element/nodename/index.html
@@ -0,0 +1,116 @@
+---
+title: Node.nodeName
+slug: Web/API/Element/nodeName
+tags:
+  - API
+  - DOM
+  - Gecko
+  - NeedsSpecTable
+  - Node
+  - Property
+  - Read-only
+translation_of: Web/API/Node/nodeName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà di sola lettura <code><strong>nodeName</strong></code> restituisce il nome dell'attuale {{domxref("Node")}} come stringa.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Interfaccia</th>
+   <th>valore nodeName</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>Il valore di {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>Il valore di {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>Il valore di {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>Il nome dell'entità</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>Il nome del riferimento all'entità</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>Il nome della notazione</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>Il valore di {{domxref("ProcessingInstruction.target")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Dato il seguente markup:</p>
+
+<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"&gt;
+</pre>
+
+<p>e il seguente script:</p>
+
+<pre class="brush:js">var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+</pre>
+
+<p>IIn XHTML (o in qualsiasi altro formato XML), il valore di <code>text_field</code> sarebbe letto <code>"div"</code>. Tuttavia, in HTML, il valore di <code>text_field</code> sarebbe letto <code>"DIV"</code>, poichè <code>nodeName</code> e <code>tagName</code> restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">details on nodeName case sensitivity in different browsers</a>.</p>
+
+<p>Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché <code>nodeName</code> ha lo stesso valore di <code>tagName</code> per un elemento. Tieni presente, tuttavia, che <code>nodeName</code> ritornerà <code>"#text"</code> per i nodi di testo mentre <code>tagName</code> restituirà <code>undefined</code>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.nodeName")}}</p>
diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html
new file mode 100644
index 0000000000..fba395288a
--- /dev/null
+++ b/files/it/web/api/element/nodetype/index.html
@@ -0,0 +1,178 @@
+---
+title: Node.nodeType
+slug: Web/API/Element/nodeType
+tags:
+  - API
+  - DOM
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Node/nodeType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.nodeType</strong></code> è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em><var>type</var></em> = <em>node</em>.nodeType;
+</pre>
+
+<p>Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.</p>
+
+<h2 id="Constanti">Constanti</h2>
+
+<h3 id="Tipi_di_nodi_costanti">Tipi di nodi costanti</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valore</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Node.ELEMENT_NODE</code></td>
+   <td><code>1</code></td>
+   <td>Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.TEXT_NODE</code></td>
+   <td><code>3</code></td>
+   <td>L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.CDATA_SECTION_NODE</code></td>
+   <td><code>4</code></td>
+   <td>Una {{domxref("CDATASection")}}, ad esempio <code>&lt;!CDATA[[ … ]]&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td>
+   <td><code>7</code></td>
+   <td>Una {{domxref("ProcessingInstruction")}} di un documento XML, come <code>&lt;?xml-stylesheet … ?&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.COMMENT_NODE</code></td>
+   <td><code>8</code></td>
+   <td>Un nodo {{domxref("Comment")}}, come <code>&lt;!-- … --&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_NODE</code></td>
+   <td><code>9</code></td>
+   <td>Un nodo {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_TYPE_NODE</code></td>
+   <td><code>10</code></td>
+   <td>Un nodo {{domxref("DocumentType")}}, come <code>&lt;!DOCTYPE html&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td>
+   <td><code>11</code></td>
+   <td>Un nodo {{domxref("DocumentFragment")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Tipi_di_nodo_deprecati_deprecated_inline()">Tipi di nodo deprecati {{deprecated_inline()}}</h3>
+
+<div class="blockIndicator note">
+<p>Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Constante</td>
+   <td>Valore</td>
+   <td>Descrizione</td>
+  </tr>
+  <tr>
+   <td><code>Node.ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+   <td>Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+   <td>Un nodo di riferimento di entità XML, come <code>&amp;foo;</code>. Rimosso nel {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_NODE</code></td>
+   <td>6</td>
+   <td>Un nodo XML <code>&lt;!ENTITY …&gt;</code>. Rimosso nel {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.NOTATION_NODE</code></td>
+   <td>12</td>
+   <td>Un nodo XML <code>&lt;!NOTATION …&gt;</code>. Rimosso nel {{SpecName("DOM4")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Diversi_tipi_di_nodi">Diversi tipi di nodi</h3>
+
+<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+</pre>
+
+<h3 id="Commenti">Commenti</h3>
+
+<p>Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.</p>
+
+<pre class="brush: js">var node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("Dovresti commentare il tuo codice!");
+}
+</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-node-nodetype', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Deprecated <code>ATTRIBUTE_NODE</code>, <code>ENTITY_REFERENCE_NODE</code> and <code>NOTATION_NODE</code> types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.nodeType")}}</p>
diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html
new file mode 100644
index 0000000000..547ba77939
--- /dev/null
+++ b/files/it/web/api/element/nodevalue/index.html
@@ -0,0 +1,75 @@
+---
+title: element.nodeValue
+slug: Web/API/Element/nodeValue
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Node/nodeValue
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il valore del nodo corrente.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><em>valore</em> = document.nodeValue
+</pre>
+<p><code>valore</code> è una stringa contenente il valore del nodo corrente, se esiste.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p>La proprietà <code>nodeValue</code> dell'intero documento, restituisce <code>null</code>. Per un nodo di tipo testo, commento o CDATA, <code>nodeValue</code> restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.</p>
+<p>La tabella seguente mostra i valori restituiti per i vari tipi di elementi:</p>
+<table>
+ <tbody>
+  <tr>
+   <td>Attr</td>
+   <td>il valore dell'attributo</td>
+  </tr>
+  <tr>
+   <td>CDATASection</td>
+   <td>il contenuto della sezione CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>il commento</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>l'intero contenuto, escluso il target</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>il contenuto del nodo testo</td>
+  </tr>
+ </tbody>
+</table>
+<p>Quando <code>nodeValue</code> è impostato a <code>null</code>, reimpostarlo non ha alcun effetto.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080">nodeValue </a></p>
diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html
new file mode 100644
index 0000000000..03e89aa432
--- /dev/null
+++ b/files/it/web/api/element/parentnode/index.html
@@ -0,0 +1,61 @@
+---
+title: Node.parentNode
+slug: Web/API/Element/parentNode
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Proprietà
+translation_of: Web/API/Node/parentNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La proprietà di sola lettura <code><strong>Node.parentNode</strong></code> restituisce il genitore del nodo specificato nell'albero DOM.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode
+</pre>
+
+<p><code>parentNode</code> è il genitore del nodo corrente. Il genitore di un elemento è un nodo <code>Element</code>, un nodo <code>Document</code>, o un nodo <code>DocumentFragment</code>.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">if (node.parentNode) {
+  // rimuovi un nodo dall'albero, a meno che
+  // non sia già nell'albero
+  node.parentNode.removeChild(node);
+}</pre>
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p>I <a href="/it/docs/Web/API/Element/nodeType">nodi</a> <code>Document</code> e <code>DocumentFragment</code> non possono mai avere un genitore, quindi <code>parentNode</code> ritornerà sempre <code>null</code>.</p>
+
+<p>Restituisce anche <code>null</code> se il nodo è appena stato creato e non è ancora collegato all'albero.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.parentNode")}}</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.parentElement")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html
new file mode 100644
index 0000000000..3371ff1f8d
--- /dev/null
+++ b/files/it/web/api/element/prefix/index.html
@@ -0,0 +1,26 @@
+---
+title: element.prefix
+slug: Web/API/Element/prefix
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Node/prefix
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il namespace del nodo, oppure <code>null</code> se il nodo non ha alcun prefisso.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>stringa</i> = element.prefix
+element.prefix =<i>stringa</i>
+</pre>
+<h3 id="Esempi" name="Esempi">Esempi</h3>
+<p>Il seguente esempio produce il messaggio "x".</p>
+<pre class="eval">&lt;x:div onclick="alert(this.prefix)"/&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (introdotto in DOM2).</p>
+<p>{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}</p>
diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..f6455563d9
--- /dev/null
+++ b/files/it/web/api/element/queryselector/index.html
@@ -0,0 +1,131 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <code><strong>querySelector()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} <code>baseElement</code> contro; questa deve essere una sintassi CSS valida o si verificherà un <code>SyntaxError</code>. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il primo elemento discendente di <code>baseElement</code> che corrisponde al gruppo specificato di <code>selectors</code>. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso <code>baseElement</code> e i suoi discendenti; in altre parole, <code>selectors</code> viene prima applicato all'intero documento, non a <code>baseElement</code>, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di <code>baseElement</code>. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo <code>querySelector()</code>.</p>
+
+<p>Se non vengono trovate corrispondenze, il valore restituito è <code>null</code>.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>I <code>selectors</code> specificati non sono validi.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Consideriamo alcuni esempi.</p>
+
+<h3 id="Trova_un_elemento_specifico_con_valori_specifici_di_un_attributo">Trova un elemento specifico con valori specifici di un attributo</h3>
+
+<p>In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="L'intera_gerarchia_conta">L'intera gerarchia conta</h3>
+
+<p>Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i <code>selectors</code>, in modo che i livelli al di fuori di <code>baseElement</code> specificato siano ancora considerati quando si localizzano le corrispondenze.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h5&gt;Original content&lt;/h5&gt;
+  &lt;p&gt;
+    inside paragraph
+    &lt;span&gt;inside span&lt;/span&gt;
+    inside paragraph
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;h5&gt;Output&lt;/h5&gt;
+  &lt;div id="output"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+  (baseElement.querySelector("div span").innerHTML);</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>Il risultato è simile a questo:</p>
+
+<p>{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}</p>
+
+<p>Nota come il selettore <code>"div span"</code> corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il<br>
+ i nodi figli di <code>baseElement</code> non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).</p>
+
+<h3 id="More_examples">More examples</h3>
+
+<p>Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i <code>selectors</code>.</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('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.querySelector")}}</p>
+
+<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="https://developer.mozilla.org/it/docs/Web/CSS/Attribute_selectors">Selettori di attributi</a> nella guida sul CSS</li>
+ <li><a href="https://developer.mozilla.org/it/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Selettori di attributi</a> nell'Area di apprendimento MDN</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets per querySelector</a></li>
+ <li>Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.</li>
+</ul>
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>
diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..2a64205cc3
--- /dev/null
+++ b/files/it/web/api/element/removeattribute/index.html
@@ -0,0 +1,57 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Riferimento
+  - metodo
+translation_of: Web/API/Element/removeAttribute
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">Il metodo {{domxref("Element")}} <strong><code>removeAttribute()</code></strong> rimuove l'attributo con il nome specificato dall'elemento.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>attrName</code></dt>
+ <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, <code>removeAttribute()</code> restituisce senza generare un errore.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>undefined</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Poiché <code>removeAttribute()</code> non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.</p>
+</div>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>Dovresti usare <code>removeAttribute()</code> <font><font>invece di impostare il valore dell'attributo </font></font><code>null</code> <font><font>direttamente o usando</font></font> {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a <code>null</code>.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">// Prima: &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// Dopo: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Specifica">Specifica</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introdotta nel <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.removeAttribute")}}</p>
diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..624e2da766
--- /dev/null
+++ b/files/it/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,110 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("Fullscreen API")}}</div>
+
+<p>Il metodo <code><strong>Element.requestFullscreen()</strong></code> invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).</p>
+
+<p>Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.</p>
+
+<div class="note">
+<p>Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>elt</em>.requestFullscreen();
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] implementato anche come <code>webkitRequestFullScreen</code>.</p>
+
+<p>[2] Implementato come <code>mozRequestFullScreen</code> (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.</p>
+
+<p>[3] Vedi <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentazione su MSDN</a>.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Using full-screen mode</li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..05cc48fd15
--- /dev/null
+++ b/files/it/web/api/element/scrollheight/index.html
@@ -0,0 +1,170 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>L' <strong><code>Element.scrollHeight</code></strong> è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello <code>scrollHeight</code> è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.</p>
+
+<div class="note">
+<p>Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2>
+
+<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>"nome dell'id"</em>).scrollHeight;
+</pre>
+
+<p>La variabile <em>intElemScrollHeight</em> è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; border: 4px dashed black; left: 260px; color: black; position: absolute; background-color: rgb(255, 255, 204);">
+<div id="idDiv" style="margin: 24px 29px; padding: 0px 28px; border: 24px solid black; width: 199px; height: 102px; overflow: auto; font-family: Arial, sans-serif; font-size: 13px !important; background-color: white;">
+<p id="PaddingTopLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/44/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Problemi_e_soluzioni">Problemi e soluzioni</h2>
+
+<h3 id="Determinare_se_un_elemento_è_arrivato_in_fondo_con_lo_scroll.">Determinare se un elemento è arrivato in fondo con lo scroll.</h3>
+
+<p>La seguente funzione ritorna <code>true</code> se l'elemento è in fondo al suo scorrimento, <code>false</code> altrimenti.</p>
+
+<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p> </p>
+
+<p>Associato all'evento <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> e <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Per esempio:</p>
+
+<div style="height: 500px; overflow: auto; margin-bottom: 12px;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Thank you." :
+    "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+
+#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+  &lt;form name="registration"&gt;
+
+    &lt;p&gt;
+      &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.
+
+Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.
+
+Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.
+
+Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.&lt;/textarea&gt;
+    &lt;/p&gt;
+
+    &lt;p&gt;
+      &lt;input type="checkbox" name="accept" id="agree" /&gt;
+      &lt;label for="agree"&gt;I agree&lt;/label&gt;
+      &lt;input type="submit" id="nextstep" value="Next" /&gt;
+    &lt;/p&gt;
+
+  &lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p><a href="https://developer.mozilla.org/files/4589/readme-example.html" title="readme-example.html">Guarda l'esempio qui sopra</a></p>
+
+<h2 id="Specification" name="Specification">Specificazioni</h2>
+
+<p><code>scrollHeight</code> è parte del modello dell'oggetto MSIE's <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> . s<code>crollHeight</code> funziona su questi browser: {{SpecName("CSSOM View")}}.</p>
+
+<h2 id="Supported" name="Supported">Compatibilità dei Browser</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versioni</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Nelle versioni più vecchie di FireFox:</strong> <span style="line-height: 1.5;">Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo </span><code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> sarebbe uguale al suo </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;"> . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).</span></p>
+
+<h2 id="See_Also" name="See_Also">Guarda anche</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..52d7520f6f
--- /dev/null
+++ b/files/it/web/api/element/scrolltop/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - API
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Element/scrollTop
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">La proprietà <code><strong>Element.scrollTop</strong></code> ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.</span></p>
+
+<p>Il valore <code>scrollTop</code> di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto <em>visibile</em> più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore <code>scrollTop</code> è <code>0</code>.</p>
+
+<div class="warning">
+<p>Sui sistemi che usano il ridimensionamento del display, <code>scrollTop</code> può darti un valore decimale.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush: js">// Get the number of pixels scrolled.
+var <var>intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p><var>Dopo aver eseguito questo codice, </var><code><var>intElemScrollTop</var></code> è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.</p>
+
+<pre class="brush: js">// Set the number of pixels scrolled.
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:</p>
+
+<ul>
+ <li>Se l'elemento non può essere scrollato (ad es. Non ha overflow o se l'elemento ha una proprietà di "<strong>non-scrollable"</strong>), <code>scrollTop</code> è <code>0</code>.</li>
+ <li><code>scrollTop</code> non risponde ai valori negativi; invece, si riporta su <code>0</code>.</li>
+ <li>Se impostato su un valore superiore al massimo disponibile per l'elemento, scrollTop si assesterà sul valore massimo.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+<em><strong>If you can see this, scrollTop = 0</strong></em>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+<strong><em>If you can see this, scrollTop is &gt; 0</em></strong>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<strong><em>If you can see this, scrollTop is maxed-out</em></strong>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.scrollTop")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..b3644c8bb2
--- /dev/null
+++ b/files/it/web/api/element/setattribute/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span class="seoSummary">Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.</span></p>
+
+<p>Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>nome</em>, <em>valore</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>nome</code></dt>
+ <dd>Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>setAttribute()</code> viene chiamato su un elemento in un documento HTML.</dd>
+ <dt><code>valore</code></dt>
+ <dd>Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.</dd>
+</dl>
+
+<p>Gli attributi booleani sono considerati <code>true</code> se sono presenti sull'elemento, indipendentemente dal loro <code>valore</code> effettivo; di norma, è necessario specificare la stringa vuota (<code>""</code>) in <code>valore</code> (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.</p>
+
+<p>Poiché il <code>valore</code> specificato viene convertito in una stringa, specificare <code>null</code> non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa <code>null</code>. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>L'attributo specificato <code>nome</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<p>Nell'esempio seguente, <code>setAttribute()</code> viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+</pre>
+
+<p>Questo dimostra due cose:</p>
+
+<ul>
+ <li>La prima chiamata a <code>setAttribute()</code> mostra la modifica del valore dell'attributo <code>name</code> su "helloButton". Puoi vederlo usando l'ispettore di pagina del tuo browser (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
+ <li>Per impostare il valore di un attributo booleano, come <code>disabled</code>, puoi specificare qualsiasi valore. Una stringa vuota o il nome dell'attributo sono valori consigliati. Tutto ciò che conta è che se l'attributo è presente a tutti, <em>indipendentemente dal suo valore reale</em>, il suo valore è considerato <code>true</code>. L'assenza dell'attributo significa che il suo valore è <code>false</code>. Impostando il valore dell'attributo <code>disabled</code> sulla stringa vuota (<code>""</code>), stiamo impostando <code>disabled</code> su <code>true</code>, il risultato è che il pulsante è disabilitato.</li>
+</ul>
+
+<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.setAttribute")}}</p>
+
+<h3 id="Notes" name="Notes">Gecko notes</h3>
+
+<p>L'utilizzo di <code>setAttribute()</code> per modificare determinati attributi, in particolare <code>value</code> in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare <code>Element.value</code> anziché <code>Element.setAttribute()</code>.</p>
diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..950a9a17a4
--- /dev/null
+++ b/files/it/web/api/element/tagname/index.html
@@ -0,0 +1,72 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - API
+  - DOM
+  - Di sola lettura
+  - Element
+  - Gecko
+  - Proprietà
+  - Referenza
+  - Referenza del DOM
+  - tagName
+translation_of: Web/API/Element/tagName
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà <strong><code>tagName</code> </strong>di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato.</span> Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà <code>tagName</code> è <code>"IMG"</code> (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = <em>Element</em>.tagName;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:</p>
+
+<ul>
+ <li>Per gli alberi del DOM che rappresentano documenti HTML, il nome del tag restituito è sempre nel formato maiuscolo canonico. Ad esempio, <code>tagName</code> chiamato su un elemento {{HTMLElement("div")}} ritorna <code>"DIV"</code>.</li>
+ <li>I nomi dei tag degli elementi in un albero del DOM di XML vengono restituiti nello stesso caso in cui sono scritti nel file XML originale. Se un documento XML include un tag <code>"&lt;SomeTag&gt;"</code>, il valore della proprietà <code>tagName</code> è <code>"SomeTag"</code>.</li>
+</ul>
+
+<p>Per gli oggetti {{domxref("Element")}}, il valore di <code>tagName</code> è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="born"&gt;Quando sono nato...&lt;/span&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.getElementById("born");
+console.log(span.tagName);
+</pre>
+
+<p>In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi <code>"span"</code> verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, <code>"SPAN"</code> verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Stato</th>
+   <th>Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.tagName")}}</p>
diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html
new file mode 100644
index 0000000000..137c76a3eb
--- /dev/null
+++ b/files/it/web/api/element/textcontent/index.html
@@ -0,0 +1,138 @@
+---
+title: Node.textContent
+slug: Web/API/Element/textContent
+tags:
+  - API
+  - Command API
+  - DOM
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà <code><strong>textContent</strong></code> dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>textContent</code> e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma <a href="#Differenze_da_innerText">i due sono diversi in modi molto importanti</a>.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>text</em> = <em>Node</em>.textContent;
+<em>Node</em>.textContent = <em>string</em>;
+</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una stringa o <code>null</code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Quando ottieni questa proprietà:</p>
+
+<ul>
+ <li>Se il nodo è <a href="/en-US/docs/DOM/document">document</a>, <a href="/en-US/docs/Glossary/Doctype">DOCTYPE</a>, o una <a href="/en-US/docs/Web/API/Notation">notation</a>, <code>textContent</code> ritorna <code>null</code>. (Per ottenere tutto il testo e i <a href="/en-US/docs/Web/API/CDATASection">dati CDATA</a> per l'intero documento, si potrebbe usare <code><a href="https://developer.mozilla.org/it/docs/Web/API/Document/documentElement">document.documentElement</a>.textContent</code>.)</li>
+ <li>Se il nodo è una <a href="/en-US/docs/Web/API/CDATASection">sezione CDATA</a>, un commento, <a href="/en-US/docs/Web/API/ProcessingInstruction">istruzione di elaborazione</a>, o <a href="/en-US/docs/Web/API/Document/createTextNode">nodo di testo</a>, <code>textContent</code> restituisce il testo all'interno del nodo, cioè {{domxref("Node.nodeValue")}}.</li>
+ <li>Per altri tipi di nodo, <code>textContent</code> restituisce la concatenazione del <code>textContent</code> di ogni nodo figlio, esclusi i commenti e le istruzioni di elaborazione. Questa è una stringa vuota se il nodo non ha figli.</li>
+</ul>
+
+<p>L'impostazione di <code>textContent</code> su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.</p>
+
+<h3 id="Differenze_da_innerText">Differenze da innerText</h3>
+
+<p>Non lasciarti confondere dalle differenze tra <code>Node.textContent</code> e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:</p>
+
+<ul>
+ <li><code>textContent</code> ottiene il contenuto di tutti gli elementi, compresi gli elementi {{HTMLElement("script")}} e {{HTMLElement("style")}}. Al contrario, <code>innerText</code> mostra solo elementi "leggibili".</li>
+ <li><code>textContent</code> restituisce ogni elemento nel nodo. Al contrario, <code>innerText</code> è consapevole dello stile e non restituirà il testo di elementi "nascosti". Inoltre, poiché <code>innerText</code> prende in considerazione gli stili CSS, la lettura del valore di <code>innerText</code> aziona un <a href="/it/docs/Glossary/Reflow">reflow</a> per garantire stili aggiornati. (I reflow possono essere computazionalmente costosi, e quindi dovrebbero essere evitati quando possibile.)</li>
+ <li>A differenza di <code>textContent</code>, la modifica di <code>innerText</code> in Internet Explorer (versione 11 e inferiore) rimuove i nodi figlio dall'elemento e <em>distrugge in modo permanente</em> tutti i nodi di testo discendenti. È impossibile inserire nuovamente i nodi in qualsiasi altro elemento o nello stesso elemento.</li>
+</ul>
+
+<h3 id="Differenze_da_innerHTML">Differenze da innerHTML</h3>
+
+<p>{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano <code>innerHTML</code> per recuperare o scrivere testo all'interno di un elemento, ma <code>textContent</code> ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di <code>textContent</code> può impedire <a href="/en-US/docs/Glossary/Cross-site_scripting">gli attacchi XSS</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Dato questo codice HTML:</p>
+
+<pre class="brush: html">&lt;div id="divA"&gt;Questo è &lt;span&gt;un&lt;/span&gt; testo!&lt;/div&gt;</pre>
+
+<p>...puoi usare <code>textContent</code> per ottenere il contenuto del testo dell'elemento:</p>
+
+<pre class="brush: js">let text = document.getElementById('divA').textContent;
+// La variabile text è ora: "Questo è un testo!"</pre>
+
+<p>...o imposta il contenuto del testo dell'elemento:</p>
+
+<pre class="brush: js">document.getElementById('divA').textContent = 'Questo testo è diverso!';
+// L'HTML per divA è ora:
+// &lt;div id="divA"&gt;Questo testo è diverso!&lt;/div&gt;
+</pre>
+
+<h2 id="Polyfill_per_IE8">Polyfill per IE8</h2>
+
+<pre class="brush: js">// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  &amp;&amp; Object.getOwnPropertyDescriptor
+  &amp;&amp; Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  &amp;&amp; !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passare innerText o innerText.get direttamente non funziona,
+     // è richiesta la funzione wrapper.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="spectable 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-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento vs. DOM4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Introdotto</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.innerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Maggiori informazioni sulle differenze tra <code>innerText</code> e <code>textContent</code></a> (blog post)</li>
+</ul>
diff --git a/files/it/web/api/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html
new file mode 100644
index 0000000000..c997b4efdd
--- /dev/null
+++ b/files/it/web/api/element/toggleattribute/index.html
@@ -0,0 +1,104 @@
+---
+title: Element.toggleAttribute()
+slug: Web/API/Element/toggleAttribute
+translation_of: Web/API/Element/toggleAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <code><strong>toggleAttribute()</strong></code> dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>Element</em>.toggleAttribute(<em>name</em> [, <em>force</em>]);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>toggleAttribute()</code> viene chiamato su un elemento HTML in un documento HTML.</dd>
+ <dt><code>force</code> {{optional_inline}}</dt>
+ <dd>Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>true</code> se l'attributo <strong><code>name</code></strong> è eventualmente presente, in caso contrario <code>false</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>L'attributo specificato <code>name</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Nell'esempio seguente, <code>toggleAttribute()</code> viene utilizzato per commutare l'attributo  <code>readonly</code> di un {{HTMLElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input value="text"&gt;
+&lt;button&gt;toggleAttribute("readonly")&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("readonly");
+});
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{ EmbedLiveSample('Esempio', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.getAttribute(name) !== null) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    } else {
+      if (force === false) return false;
+
+      this.setAttribute(name, "");
+      return true;
+    }
+  };
+}
+</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-element-toggleattribute', 'Element.toggleAttribute')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.toggleAttribute")}}</p>