path: root/files/pt-br/web/api/node/textcontent/index.html

---
title: Node.textContent
slug: Web/API/Node/textContent
tags:
  - API
  - DOM
  - Property
translation_of: Web/API/Node/textContent
---
<div>{{APIRef("DOM")}}</div>



<p>A propriedade <code><strong>textContent</strong></code> da interface {{domxref("Node")}} representa o conteúdo de texto de um nó e dos seus descendentes.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> <code>textContent</code> e {{domxref("HTMLElement.innerText")}} são facilmente confundidos, mas <a href="#Differences_from_innerText">os dois possuem importantes diferenças entre sí.</a></p>
</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush: js">var <em>text</em> = <em>Node</em>.textContent;
<em>Node</em>.textContent = <em>string</em>;
</pre>

<h3 id="Valor_de_retorno">Valor de retorno</h3>

<p>Uma <code>String</code> ou <code>null</code></p>

<h2 id="Descrição">Descrição</h2>

<p>Ao obter valores desta propriedade:</p>

<ul>
 <li>Se o nó for um <a href="/en-US/docs/DOM/document">document</a>, um <a href="/en-US/docs/Glossary/Doctype">DOCTYPE</a>, ou uma <a href="/en-US/docs/Web/API/Notation">notation</a>, o <code>textContent</code> retornará <code>null</code>. (Para se obter todo o texto e os <a href="/en-US/docs/Web/API/CDATASection">dados CDATA</a> do documento inteiro, você poderá usar <code><a href="/en-US/docs/DOM/document.documentElement">document.documentElement</a>.textContent</code>.)</li>
 <li>Se o nó for uma <a href="/en-US/docs/Web/API/CDATASection">seção CDATA</a>, comentário, <a href="/en-US/docs/Web/API/ProcessingInstruction">instrução de processamento</a>, ou um <a href="/en-US/docs/Web/API/Document/createTextNode">text node</a>, o  <code>textContent</code> retornará o texto dentro do nó, i.e., o {{domxref("Node.nodeValue")}}.</li>
 <li>Para outros tipos de nó, o <code>textContent</code> retornará a concatenação <code>textContent</code> de cada nó filho, exceto comentários e instruções de processamento. Essa é uma string vazia se o nó não tiver filhos.</li>
</ul>

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

<h3 id="Diferenças_para_o_innerText">Diferenças para o innerText</h3>

<p>Não fique confuso pelas diferenças entre o <code>Node.textContent</code> e o {{domxref("HTMLElement.innerText")}}. Apesar dos nomes parecerem similares, eles possuem importantes diferenças:</p>

<ul>
 <li><code>textContent</code> obtém o conteúdo de todos os elementos, incluindo os elementos {{HTMLElement("script")}} e {{HTMLElement("style")}}. por outro lado, o <code>innerText</code> mostra apenas os elementos para "leitura humana".</li>
 <li><code>textContent</code> retorna todos os elementos de um nó. Por outro lado, o  <code>innerText</code> é ciente da estilização e não retorna elementos de texto "escondidos". Além disso, como o <code>innerText</code> leva em consideração os estilos CSS, a leitura do valor de <code>innerText</code> 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.)</li>
 <li>ao contrário do <code>textContent</code>, alterar o <code>innerText</code> no Internet Explorer (versão 11 e anteriores) remove os nós filhos do elemento e, <em>destroi permanentemente</em> todos os nós de texto descendentes. Isso torna impossível inserir novamente os nós em qualquer outro elemento ou no mesmo elemento.</li>
</ul>

<h3 id="Diferenças_para_o_innerHTML">Diferenças para o innerHTML</h3>

<p>O {{domxref("Element.innerHTML")}} retorna HTML, Como seu próprio nome indica. As vezes as pessoas usam o <code>innerHTML</code> para obter ou escrever textos dentro de um elemento, mas o <code>textContent</code> possui melhor performance pois seus valores não são analisados como HTML. Além do mais, utilizar <code>textContent</code> pode prevenir <a href="/en-US/docs/Glossary/Cross-site_scripting">ataques XSS</a>.</p>

<h2 id="Exemplos">Exemplos</h2>

<p>Dado o seguinte fragmento HTML:</p>

<pre class="brush: html">&lt;div id="divA"&gt;Isto é&lt;span&gt;algum&lt;/span&gt; texto!&lt;/div&gt;</pre>

<p>... Você pode usar <code>textContent</code> para obter o conteúdo de texto do elemento:</p>

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

<p>... Ou definir o conteúdo de texto do elemento:</p>

<pre class="brush: js">document.getElementById('divA').textContent = 'Este texto é diferente!';
// O HTML de divA agora é:
// &lt;div id="divA"&gt;Este texto é diferente!&lt;/div&gt;
</pre>

<h2 id="Polyfill_para_o_IE8">Polyfill para o IE8</h2>

<pre class="brush: js">// Fonte: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
if (Object.defineProperty
  &amp;&amp; Object.getOwnPropertyDescriptor
  &amp;&amp; Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
  &amp;&amp; !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);
       }
     }
   );
  })();
}
</pre>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("api.Node.textContent")}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Sem alterações vs. DOM4</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
   <td>{{Spec2('DOM4')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Introduzida</td>
  </tr>
 </tbody>
</table>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{domxref("HTMLElement.innerText")}}</li>
 <li>{{domxref("Element.innerHTML")}}</li>
 <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li>
</ul>