Texto JavaScriptConteúdo

Resumo : neste tutorial, você aprenderá como usar a textContentpropriedade JavaScript para obter o conteúdo de texto de um nó e seus descendentes.

Lendo textContentde um nó

Para obter o conteúdo de texto de um nó e seus descendentes, você usa a textContentpropriedade:

let text = node.textContent;Linguagem de código:  JavaScript  ( javascript )

Suponha que você tenha o seguinte snippet HTML:

<div id="note">
    JavaScript textContent Demo!
    <span style="display:none">Hidden Text!</span>
    <!-- my comment -->
</div>    
Linguagem de código:  HTML, XML  ( xml )

O exemplo a seguir usa a textContentpropriedade para obter o texto do <div>elemento:

let note = document.getElementById('note');
console.log(note.textContent);Linguagem de código:  JavaScript  ( javascript )

Como funciona.

• Primeiro, selecione o divelemento com a nota de identificação usando o getElementById()método.
• Em seguida, exiba o texto do nó acessando a textContentpropriedade.

Saída:

JavaScript textContent Demo!
Hidden Text!

Como você pode ver claramente na saída, a textContentpropriedade retorna a concatenação de textContentcada nó filho , excluindo comentários (e também instruções de processamento).

textContentvs.innerText

Por outro lado, innerTextleva em consideração o estilo CSS e retorna apenas texto legível por humanos. Por exemplo:

let note = document.getElementById('note');
console.log(note.innerText);Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript textContent Demo!

Como você pode ver, o texto e os comentários ocultos não são retornados.

Como a innerTextpropriedade usa CSS atualizado para calcular o texto, acessá-la acionará um refluxo, que é computacionalmente caro.

Um refluxo  ocorre quando um navegador da web precisa processar e desenhar partes ou toda uma página da web novamente.

Configuração textContentpara um nó

Além de read textContent, você também pode usar a textContentpropriedade para definir o texto de um nó:

node.textContent = newText;

Quando você define textContentum nó, todos os filhos do nó serão removidos e substituídos por um único nó de texto com o newTextvalor. Por exemplo:

let note = document.getElementById('note');
note.textContent = 'This is a note';Linguagem de código:  JavaScript  ( javascript )

Resumo

• Use a textContentpropriedade para retornar a concatenação de textContentcada nó filho. Você pode usá-lo para definir um texto para um nó.
• O innerTextretorna o texto legível por humanos que leva em consideração o CSS.