diff options
Diffstat (limited to 'files/it/web/api/element')
| -rw-r--r-- | files/it/web/api/element/addeventlistener/index.html | 694 | ||||
| -rw-r--r-- | files/it/web/api/element/childnodes/index.html | 99 | ||||
| -rw-r--r-- | files/it/web/api/element/firstchild/index.html | 90 | ||||
| -rw-r--r-- | files/it/web/api/element/nodename/index.html | 116 | ||||
| -rw-r--r-- | files/it/web/api/element/nodetype/index.html | 178 | ||||
| -rw-r--r-- | files/it/web/api/element/nodevalue/index.html | 75 | ||||
| -rw-r--r-- | files/it/web/api/element/parentnode/index.html | 61 | ||||
| -rw-r--r-- | files/it/web/api/element/prefix/index.html | 26 | ||||
| -rw-r--r-- | files/it/web/api/element/textcontent/index.html | 138 |
9 files changed, 0 insertions, 1477 deletions
diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html deleted file mode 100644 index 6608e69bd3..0000000000 --- a/files/it/web/api/element/addeventlistener/index.html +++ /dev/null @@ -1,694 +0,0 @@ ---- -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"><table id="outside"> - <tr><td id="t1">one</td></tr> - <tr><td id="t2">two</td></tr> -</table> -</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"><table id="outside"> - <tr><td id="t1">one</td></tr> - <tr><td id="t2">two</td></tr> -</table></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"><table id="outside"> - <tr><td id="t1">one</td></tr> - <tr><td id="t2">two</td></tr> -</table></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", () => { 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"><div class="outer"> - outer, once & none-once - <div class="middle" target="_blank"> - middle, capture & none-capture - <a class="inner1" href="https://www.mozilla.org" target="_blank"> - inner1, passive & preventDefault(which is not allowed) - </a> - <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> - inner2, none-passive & preventDefault(not open new page) - </a> - </div> -</div> -</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) => { - 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"><table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> - ... -</table> -</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"><script> - function logID() { console.log(this.id); } -</script> -<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object --> - ... -</table> -</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<eventListeners.length) { - var eventListener=eventListeners[counter]; - if (eventListener.object==this && eventListener.type==type && 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 < els.length; i++) { - els[i].addEventListener("click", function(e){/* do something */}, false); -} - - -// Case 2 -function processEvent(e) { - /* do something */ -} - -for(var i = 0; i < 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 < 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 < 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/childnodes/index.html b/files/it/web/api/element/childnodes/index.html deleted file mode 100644 index f56bcc4380..0000000000 --- a/files/it/web/api/element/childnodes/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 <p> - -// Innanzitutto controlliamo che l'elemento abbia dei nodi figli -if (parg.hasChildNodes()) { - var children = parg.childNodes; - - for (var i = 0; i < 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/firstchild/index.html b/files/it/web/api/element/firstchild/index.html deleted file mode 100644 index b5052f5dfe..0000000000 --- a/files/it/web/api/element/firstchild/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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"><p id="para-01"> - <span>First span</span> -</p> - -<script> - var p01 = document.getElementById('para-01'); - console.log(p01.firstChild.nodeName); -</script></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><p></code> e <code><span></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></span></code> e <code></p></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"><p id="para-01"><span>First span</span></p> - -<script> - var p01 = document.getElementById('para-01'); - console.log(p01.firstChild.nodeName); -</script> -</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/nodename/index.html b/files/it/web/api/element/nodename/index.html deleted file mode 100644 index 2030226b37..0000000000 --- a/files/it/web/api/element/nodename/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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"><div id="d1">hello world</div> -<input type="text" id="t"> -</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 deleted file mode 100644 index fba395288a..0000000000 --- a/files/it/web/api/element/nodetype/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -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><!CDATA[[ … ]]></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><?xml-stylesheet … ?></code>.</td> - </tr> - <tr> - <td><code>Node.COMMENT_NODE</code></td> - <td><code>8</code></td> - <td>Un nodo {{domxref("Comment")}}, come <code><!-- … --></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><!DOCTYPE html></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>&foo;</code>. Rimosso nel {{SpecName("DOM4")}}.</td> - </tr> - <tr> - <td><code>Node.ENTITY_NODE</code></td> - <td>6</td> - <td>Un nodo XML <code><!ENTITY …></code>. Rimosso nel {{SpecName("DOM4")}}.</td> - </tr> - <tr> - <td><code>Node.NOTATION_NODE</code></td> - <td>12</td> - <td>Un nodo XML <code><!NOTATION …></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 deleted file mode 100644 index 547ba77939..0000000000 --- a/files/it/web/api/element/nodevalue/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index 03e89aa432..0000000000 --- a/files/it/web/api/element/parentnode/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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 deleted file mode 100644 index 3371ff1f8d..0000000000 --- a/files/it/web/api/element/prefix/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -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"><x:div onclick="alert(this.prefix)"/> -</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/textcontent/index.html b/files/it/web/api/element/textcontent/index.html deleted file mode 100644 index 137c76a3eb..0000000000 --- a/files/it/web/api/element/textcontent/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -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"><div id="divA">Questo è <span>un</span> testo!</div></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: -// <div id="divA">Questo testo è diverso!</div> -</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 - && Object.getOwnPropertyDescriptor - && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") - && !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> |