Node.textContent

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. (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 HTML:

<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

BCD tables only load in the browser

Specifiche

Vedi anche