Atributo textContent do Elemento HTML DOM

Definição e uso

textContent O atributo define ou retorna o conteúdo de texto de um nó específico, bem como de todos seus descendentes.

Se você configurar textContent O atributo, ao ser configurado, deletará todos os subnós e será substituído por um único nó de texto contendo a string fornecida.

Dica:Às vezes, este atributo pode ser usado para substituir o atributo nodeValue, mas lembre-se de que ele também retornará o texto de todos os subnós.

Veja também:

Atributo innerText

Atributo innerHTML

Exemplo

Exemplo 1

Retornar o conteúdo de texto do elemento:

let text = element.textContent;

Experimente você mesmo

Exemplo 2

Alterar o conteúdo de texto do elemento <p> com id="demo":

element.textContent = "I have changed!";

Experimente você mesmo

Exemplo 3

Obter o conteúdo de texto de todos os elementos <ul> com id="myList":

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

Experimente você mesmo

Sintaxe

Retornar o conteúdo de texto do nó:

elemento.textContent

ou

node.textContent

Definir o conteúdo de texto do nó:

elemento.textContent = text
node.textContent = text

Valor do atributo

Valor Descrição
text O conteúdo de texto do elemento ou nó.

Retorno

Tipo Descrição
String

O conteúdo de texto do elemento e todos seus descendentes.

Se o elemento for document, document type ou notation, retorna null.

Diferenças entre innerHTML, innerText e textContent

A propriedade innerText retorna:

Retorna apenas o conteúdo de texto do elemento e todos seus descendentes, sem espaços em branco ocultos CSS e tags, exceto elementos <script> e <style>.

A propriedade innerHTML retorna:

O conteúdo de texto do elemento, incluindo todos os espaços em branco e tags HTML internas.

A propriedade textContent retorna:

O conteúdo de texto de todos os elementos e seus descendentes, com espaços em branco e texto oculto CSS, mas sem tags.

Exemplo HTML

<p id="myP">   Este elemento tem espaçamento extra     e contém <span>um elemento span</span>.</p>

Exemplos JavaScript

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

Experimente você mesmo

Neste exemplo acima:

A propriedade innerText retorna:

Este elemento tem espaçamento extra e contém um elemento <span>span</span>.

A propriedade innerHTML retorna:

   Este elemento tem espaçamento extra e contém <span>um elemento span</span>.

A propriedade textContent retorna:

   Este elemento tem espaçamento extra e contém um elemento <span>span</span>.

Suporte do navegador

element.textContent é uma característica do DOM Level 3 (2004).

Todos os navegadores suportam completamente:

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