Node.textContent

A propriedade textContent da interface Node representa o conteúdo de texto de um nó e dos seus descendentes.

Nota: textContent e HTMLElement.innerText são facilmente confundidos, mas os dois possuem importantes diferenças entre sí.

Sintaxe

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

Valor de retorno

Uma String ou null

Descrição

Ao obter valores desta propriedade:

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>

Polyfill para o IE8

// Fonte: 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",
     // Passando innerText ou innerText.get diretamente não funciona,
     // Função wrapper(que envolve) é necessária.
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

Browser compatibility

BCD tables only load in the browser

Especificações

Veja também