diff options
Diffstat (limited to 'files/pt-br/web/api/node/textcontent/index.html')
| -rw-r--r-- | files/pt-br/web/api/node/textcontent/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/pt-br/web/api/node/textcontent/index.html b/files/pt-br/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..0fb3c38bdb --- /dev/null +++ b/files/pt-br/web/api/node/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Property +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<div></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"><div id="divA">Isto é<span>algum</span> texto!</div></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 é: +// <div id="divA">Este texto é diferente!</div> +</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 + && 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); + } + } + ); + })(); +} +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">Estamos convertendo nossos dados de compatibilidade para o formato JSON.</a> Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. <a href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/Structures/Compatibility_tables"> Descubra como você pode ajudar!</a></div> + +<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> |