Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

 

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, destrói permanentemente todos os nós de texto descendentes. Tornando impossível inserir novamente os nós 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
textContentChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Especificações

Specification Status Comment
DOM
The definition of 'Node.textContent' in that specification.
Padrão em tempo real Sem alterações vs. DOM4
DOM4
The definition of 'Node.textContent' in that specification.
Obsoleto  
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node.textContent' in that specification.
Obsoleto Introduzida

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: marlonveiga-santos
Última atualização por: marlonveiga-santos,