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

Note: textContent e HTMLElement.innerText sono facilmente confusi, ma i due sono diversi in modi molto importanti.

Sintassi

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

Valore di ritorno

Una stringa o null.

Descrizione

Quando ottieni questa proprietà:

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Specifiche

Specifica Stato Commento
DOM
The definition of 'Node.textContent' in that specification.
Living Standard Nessun cambiamento vs. DOM4
DOM4
The definition of 'Node.textContent' in that specification.
Obsolete  
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node.textContent' in that specification.
Obsolete Introdotto

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev, teoli, khalid32, Federico
Ultima modifica di: IsibisiDev,