Proprietà HTML DOM textContent
Esempio
Ottieni il contenuto testuale di un elemento:
var x =
document.getElementById("myBtn").textContent;
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La proprietà textContent imposta o restituisce il contenuto di testo del nodo specificato e tutti i suoi discendenti .
Se si imposta la proprietà textContent, tutti i nodi figlio vengono rimossi e sostituiti da un singolo nodo Text contenente la stringa specificata.
Nota: questa proprietà è simile alla proprietà innerText , tuttavia ci sono alcune differenze:
- textContent restituisce il contenuto testuale di tutti gli elementi, mentre innerText restituisce il contenuto di tutti gli elementi, ad eccezione degli elementi <script> e <style>.
- innerText non restituirà il testo degli elementi nascosti con CSS (textContent lo farà).
Suggerimento: a volte questa proprietà può essere utilizzata al posto della proprietà nodeValue , ma ricorda che questa proprietà restituisce anche il testo di tutti i nodi figlio.
Suggerimento: per impostare o restituire il contenuto HTML di un elemento, utilizzare la proprietà innerHTML .
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Sintassi
Restituisce il contenuto testuale di un nodo:
node.textContent
Imposta il contenuto del testo di un nodo:
node.textContent = text
Valori di proprietà
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Dettagli tecnici
Valore di ritorno: | Una stringa, che rappresenta il testo del nodo e tutti i suoi discendenti. Restituisce null se l'elemento è un documento, un tipo di documento o una notazione. |
---|---|
Versione DOM | Oggetto nodo di livello 3 di base |
Altri esempi
Esempio
Modifica il contenuto testuale di un elemento <p> con id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Esempio
Ottieni tutto il contenuto testuale di un elemento <ul> con id="myList":
var x = document.getElementById("myList").textContent;
Il valore di x sarà:
Coffee Tea
Esempio
Questo esempio mostra alcune delle differenze tra innerText, innerHTML e textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Ottieni il contenuto dell'elemento <p> sopra con le proprietà specificate:
innerText restituisce: "Questo elemento ha una spaziatura extra e contiene un elemento span."
innerHTML restituisce: " Questo elemento ha una spaziatura extra e contiene <span>un elemento span</span>."
textContent restituisce: " Questo elemento ha una spaziatura extra e contiene un elemento span."
La proprietà innerText restituisce solo il testo, senza spaziatura e tag dell'elemento interno.
La proprietà innerHTML restituisce il testo, inclusi tutti i tag di spaziatura e di elemento interno.
La proprietà textContent restituisce il testo con spaziatura, ma senza tag di elementi interni.