path: root/files/it/web/api/element/textcontent/index.html

---
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>