La proprietà textContent dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.
Note: textContent e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma i due sono diversi in modi molto importanti.
var text = Node.textContent; Node.textContent = string;
Una stringa o null.
Quando ottieni questa proprietà:
textContent ritorna null. (Per ottenere tutto il testo e i dati CDATA per l'intero documento, si potrebbe usare document.documentElement.textContent.)textContent restituisce il testo all'interno del nodo, cioè {{domxref("Node.nodeValue")}}.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.
Non lasciarti confondere dalle differenze tra Node.textContent e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:
textContent ottiene il contenuto di tutti gli elementi, compresi gli elementi {{HTMLElement("script")}} e {{HTMLElement("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.)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.{{domxref("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.
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>
// 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);
}
}
);
})();
}
{{Compat("api.Node.textContent")}}
| Specifica | Stato | Commento |
|---|---|---|
| {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} | Nessun cambiamento vs. DOM4 |
| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | |
| {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}} | Introdotto |
innerText e textContent (blog post)