element.textContent

La proprietà textContent dell'interfaccia Node rappresenta il contenuto del testo di un nodo e dei suoi discendenti.

Sintassi

var text = Node.textContent;
Node.textContent = string;

Valore di ritorno

Una stringa o null.

Descrizione

Quando ottieni questa proprietà:

• Se il nodo è document, DOCTYPE, o una notation, textContent ritorna null. (Per ottenere tutto il testo e i dati CDATA per l'intero documento, si potrebbe usare document.documentElement.textContent.)
• Se il nodo è una sezione CDATA, un commento, istruzione di elaborazione, o nodo di testo, textContent restituisce il testo all'interno del nodo, cioè Node.nodeValue.
• Per altri tipi di nodo, textContent restituisce la concatenazione del textContent di ogni nodo figlio, esclusi i commenti e le istruzioni di elaborazione. Questa è una stringa vuota se il nodo non ha figli.

L'impostazione di textContent su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.

Differenze da innerText

Non lasciarti confondere dalle differenze tra Node.textContent e HTMLElement.innerText. Anche se i nomi sembrano simili, ci sono differenze importanti:

• textContent ottiene il contenuto di tutti gli elementi, compresi gli elementi <script> e <style>. Al contrario, innerText mostra solo elementi "leggibili".
• textContent restituisce ogni elemento nel nodo. Al contrario, innerText è consapevole dello stile e non restituirà il testo di elementi "nascosti". Inoltre, poiché innerText prende in considerazione gli stili CSS, la lettura del valore di innerText aziona un reflow per garantire stili aggiornati aggiornati. (I reflow possono essere computazionalmente costosi, e quindi dovrebbero essere evitati quando possibile.)
• A differenza di textContent, la modifica di innerText in Internet Explorer (versione 11 e inferiore) rimuove i nodi figlio dall'elemento e distrugge in modo permanente tutti i nodi di testo discendenti. È impossibile inserire nuovamente i nodi in qualsiasi altro elemento o nello stesso elemento.

Differenze da innerHTML

Element.innerHTML restituisce HTML, come indica il nome. A volte le persone usano innerHTML per recuperare o scrivere testo all'interno di un elemento, ma textContent ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di textContent può impedire gli attacchi XSS.

Esempi

Dato questo codice:

<div id="divA">Questo è <span>un</span> testo!</div>

...puoi usare textContent per ottenere il contenuto del testo dell'elemento:

let text = document.getElementById('divA').textContent;
// La variabile text è ora: "Questo è un testo!"

...o imposta il contenuto del testo dell'elemento:

document.getElementById('divA').textContent = 'Questo testo è diverso!';
// L'HTML per divA è ora:
// <div id="divA">Questo testo è diverso!</div>

Polyfill per IE8

// 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);
       }
     }
   );
  })();
}

Compatibilità con i browser

Specifiche

Vedi anche

• HTMLElement.innerText
• Element.innerHTML
• Maggiori informazioni sulle differenze tra innerText e textContent (blog post)