Node.textContent

Sintaxe

var text = Node.textContent;
Node.textContent = string;

Valor de retorno

Uma String ou null

Descrição

Ao obter valores desta propriedade:

• Se o nó for um document, um DOCTYPE, ou uma notation, o textContent retornará null. (Para se obter todo o texto e os dados CDATA do documento inteiro, você poderá usar document.documentElement.textContent.)
• Se o nó for uma seção CDATA, comentário, instrução de processamento, ou um text node, o textContent retornará o texto dentro do nó, i.e., o Node.nodeValue.
• Para outros tipos de nó, o textContent retornará a concatenação textContent de cada nó filho, exceto comentários e instruções de processamento. Essa é uma string vazia se o nó não tiver filhos.

Definir valores textContent em um nó, remove todos os nós filhos e os substituem por um único nó de texto cujo o valor é a string inserida.

Diferenças para o innerText

Não fique confuso pelas diferenças entre o Node.textContent e o HTMLElement.innerText. Apesar dos nomes parecerem similares, eles possuem importantes diferenças:

• textContent obtém o conteúdo de todos os elementos, incluindo os elementos <script> e <style>. por outro lado, o innerText mostra apenas os elementos para "leitura humana".
• textContent retorna todos os elementos de um nó. Por outro lado, o innerText é ciente da estilização e não retorna elementos de texto "escondidos". Além disso, como o innerText leva em consideração os estilos CSS, a leitura do valor de innerText dispara um reflow para assegurar a atualização dos estilos computados. (Reflows podem ser computacionalmente caros, e devem ser evitados quando for possível.)
• ao contrário do textContent, alterar o innerText no Internet Explorer (versão 11 e anteriores) remove os nós filhos do elemento e, destroi permanentemente todos os nós de texto descendentes. Isso torna impossível inserir novamente os nós em qualquer outro elemento ou no mesmo elemento.

Diferenças para o innerHTML

O Element.innerHTML retorna HTML, Como seu próprio nome indica. As vezes as pessoas usam o innerHTML para obter ou escrever textos dentro de um elemento, mas o textContent possui melhor performance pois seus valores não são analisados como HTML. Além do mais, utilizar textContent pode prevenir ataques XSS.

Exemplos

Dado o seguinte fragmento HTML:

<div id="divA">Isto é<span>algum</span> texto!</div>

... Você pode usar textContent para obter o conteúdo de texto do elemento:

let text = document.getElementById("divA").textContent;
// Agora a variável de texto é: 'Isto é algum texto!'

... Ou definir o conteúdo de texto do elemento:

document.getElementById("divA").textContent = "Este texto é diferente!";
// O HTML de divA agora é:
// <div id="divA">Este texto é diferente!</div>

Especificações

Compatibilidade com navegadores

Veja também

• HTMLElement.innerText
• Element.innerHTML
• More on differences between innerText and textContent (blog post)