A propriedade textContent da interface {{domxref("Node")}} representa o conteúdo de texto de um nó e dos seus descendentes.
Nota: textContent e {{domxref("HTMLElement.innerText")}} são facilmente confundidos, mas os dois possuem importantes diferenças entre sí.
var text = Node.textContent; Node.textContent = string;
Uma String ou null
Ao obter valores desta propriedade:
textContent retornará null. (Para se obter todo o texto e os dados CDATA do documento inteiro, você poderá usar document.documentElement.textContent.)textContent retornará o texto dentro do nó, i.e., o {{domxref("Node.nodeValue")}}.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.
Não fique confuso pelas diferenças entre o Node.textContent e o {{domxref("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 {{HTMLElement("script")}} e {{HTMLElement("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 {{glossary("reflow")}} para assegurar a atualização dos estilos computados. (Reflows podem ser computacionalmente caros, e devem ser evitados quando for possível.)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.O {{domxref("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.
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>
// 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);
}
}
);
})();
}
{{Compat("api.Node.textContent")}}
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} | Sem alterações vs. DOM4 |
| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | |
| {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}} | Introduzida |
innerText and textContent (blog post)