Proprietà textContent dell'Elemento DOM HTML

Definizione e uso

textContent Proprietà che imposta o restituisce il contenuto testuale di un nodo specifico, nonché di tutti i suoi discendenti.

Se hai impostato textContent Proprietà, che elimina tutti i sotto-nodi e li sostituisce con un singolo nodo di testo contenente la stringa fornita.

Suggerimento:A volte, questa proprietà può essere utilizzata per sostituire la proprietà nodeValue, ma ricorda che questa proprietà restituirà anche il testo di tutti i sotto-nodi.

Vedi anche:

Proprietà innerText

Proprietà innerHTML

Esempio

Esempio 1

Restituisci il contenuto testuale dell'elemento:

let text = element.textContent;

Provalo tu stesso

Esempio 2

Cambia il contenuto testuale dell'elemento <p> con id="demo":

element.textContent = "I have changed!";

Provalo tu stesso

Esempio 3

Ottieni tutto il contenuto testuale dell'elemento <ul> con id="myList":

let text = document.getElementById("myList").textContent;

Provalo tu stesso

Sintassi

Restituisce il contenuto testuale del nodo:

element.textContent

o

node.textContent

Imposta il contenuto testuale del nodo:

element.textContent = text
node.textContent = text

Valore dell'attributo

Valore Descrizione
text Il contenuto testuale di un elemento o di un nodo.

Valore restituito

Tipo Descrizione
Stringa

Il contenuto testuale dell'elemento e di tutti i suoi discendenti.

Se l'elemento è document, document type o notation, restituisce null.

Differenze tra innerHTML, innerText e textContent

L'attributo innerText restituisce:

Restituisce solo il contenuto testuale dell'elemento e di tutti i suoi figli, senza spazi e tag nascosti CSS, eccetto gli elementi <script> e <style>.

L'attributo innerHTML restituisce:

Il contenuto testuale di un elemento, inclusi tutti gli spazi e i tag HTML interni.

L'attributo textContent restituisce:

Il contenuto testuale di un elemento e di tutti i suoi discendenti, con spazi e testo nascosto CSS, ma senza tag.

Esempio HTML

<p id="myP">   Questo elemento ha uno spazio extra     e contiene <span>un elemento span</span>.</p>

Esempi JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Provalo tu stesso

Nell'esempio sopra:

L'attributo innerText restituisce:

Questo elemento ha uno spazio extra e contiene un elemento <span>span</span>.

L'attributo innerHTML restituisce:

   Questo elemento ha uno spazio extra e contiene <span>un elemento span</span>.

L'attributo textContent restituisce:

   Questo elemento ha uno spazio extra e contiene un elemento <span>span</span>.

Supporto del browser

element.textContent è una caratteristica di DOM Level 3 (2004).

Tutti i browser lo supportano completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto