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à:
- Se il nodo è document, DOCTYPE, o una notation,
textContent
ritornanull
. (Per ottenere tutto il testo e i dati CDATA per l'intero documento, si potrebbe usaredocument.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 deltextContent
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 diinnerText
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 diinnerText
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
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 |