A propriedade JavaScript textContent funciona para definir e obter o conteúdo de texto da página. É usado para passar e exibir o conteúdo de texto de algumas informações, tags e dados de grande tamanho e seus nós. O TextContent varia do nodeValue da tag de script e retorna conteúdo de nós filhos de vários tipos de dados.
Se o nó for um nó de texto, uma instrução de processamento ou uma observação de tag, o javascript textContent obtém ou define o texto. O TextContent mostra a concatenação do textContent de cada nó filho. Mostra as instruções de processamento e comentários para os outros tipos de nós.
Sintaxe
Existem duas sintaxes disponíveis para o conteúdo de texto JavaScript. A primeira sintaxe é usada para definir o texto de um nó e a segunda sintaxe é usada para recuperar o texto do nó.
Sintaxe 1:
A sintaxe a seguir usa para definir o texto do nó usando conteúdo textual.
lista de inicialização do python
Node_element.textContent = information;
Sintaxe 2:
A sintaxe a seguir usa conteúdo textual para obter o texto do nó.
Node_element.textContent;
Valor de retorno:
- Uma string contém o texto do nó de saída e de seu nó filho. A saída mostra um valor nulo se um elemento for um documento ou tipo de documento.
- Os nós filhos são substituídos por um único nó Text usando o conjunto do atributo textContent. O atributo possui uma string específica como conteúdo.
Exemplos
Os exemplos a seguir mostram o conjunto e obtêm vários tipos de informações usando o atributo textContent.
Exemplo 1
O exemplo a seguir usa conteúdo de texto em javascript para definir as informações. Os dados do nó mostram o texto das tags.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } Saída
A imagem a seguir mostra o conjunto de dados usando o nó de conteúdo.
Exemplo 2
O exemplo a seguir usa conteúdo de texto em javascript para obter as informações. Podemos obter o valor do botão da função click.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } Saída
A imagem a seguir mostra o conjunto de dados usando o nó de conteúdo.
Exemplo 3
O exemplo a seguir usa conteúdo de texto em javascript para obter as informações. Podemos obter o valor do botão da função click.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById('value').textContent; document.getElementById('textContent_information').textContent = text_in; } Saída
A imagem a seguir mostra o conjunto de dados usando o nó de conteúdo.
Exemplo4
desvantagens do banco online
O exemplo a seguir usa conteúdo de texto no valor do botão para obter e definir as informações. Podemos obter o valor após clicar no botão.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } Saída
A imagem a seguir mostra o conjunto de dados usando o nó de conteúdo.
Exemplo5
O exemplo a seguir usa para obter e definir as informações usando innerHtml, innerText e conteúdo de texto no valor do botão. Podemos obter a diferença nos dados de saída após clicar no botão.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!'; } Saída
A imagem a seguir mostra o conjunto de dados usando o nó de conteúdo.
Exemplo 6
O exemplo a seguir usa para obter os dados da lista e definir as informações usando o conteúdo de texto no valor do botão onclick. Podemos obter os dados da lista e outras informações das tags.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; document.getElementById('tinfo').textContent = students; } Saída
A imagem a seguir mostra o conjunto de dados usando o nó de conteúdo.
gráfico de alocação de recursos
Exemplo 7
O conteúdo do texto não oferece suporte a dados vazios se as informações ou a sequência estiverem vazias. Mostra a string vazia como um valor.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } Saída
A imagem a seguir mostra como obter os dados usando o nó de conteúdo de texto.
Ponto-chave do conteúdo do texto em javascript
- Quando as informações javascript removem HTML automaticamente, a utilização de textContent é segura.
- O conteúdo e as informações do texto incluem os espaços e as tags dos elementos internos. O atributo innerHTML irá retorná-lo.
- O atributo innerText retorna apenas texto sem espaços ou tags de elemento interno. A propriedade textContent retorna texto que inclui espaços, mas exclui tags de elementos internos.
- Os valores de todos os nós de texto na subárvore são combinados e definidos para conteúdo de texto e obtidos a partir do conteúdo de texto. Se um nó não tiver filhos, a string estará vazia.
- O innerText retorna texto que é legível por humanos e pode ser usado em qualquer CSS. O conteúdo do texto é difícil de ler quando tags HTML são usadas nos dados.
- Quando uma propriedade é definida em um nó, todos os seus filhos são removidos e um único nó de texto toma seu lugar com o valor especificado.
Conclusão
O conteúdo do texto exibe vários tipos de informações. A tag html exigia informações e listava dados mostrados usando um único método.