diff options
Diffstat (limited to 'files/it/web/api/node/textcontent/index.html')
| -rw-r--r-- | files/it/web/api/node/textcontent/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/it/web/api/node/textcontent/index.html b/files/it/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/node/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"><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> |