Obtenha o texto de um elemento HTML usando JavaScript
Às vezes, os desenvolvedores precisam definir ou obter o texto de um elemento HTML para executar várias tarefas. Para obter o texto de um elemento, utilize o “TextContentPropriedade com propriedades InnerHTML e InnerText. O elemento.O TextContent é um recurso DOM Nível 3 que é totalmente suportado em todos os navegadores.
Este artigo explicará o procedimento para obter o texto de um elemento usando JavaScript.
Como obter o texto de um elemento HTML usando JavaScript?
Utilize as seguintes abordagens para obter o texto de um elemento usando JavaScript:
- Propriedade do TextContent com propriedade InnerHTML
- Propriedade do TextContent com propriedade InnerText
Método 1: Obtenha o texto de um elemento HTML usando a propriedade TextContent com a propriedade InnerHTML
O conteúdo de texto do nó especificado e seus descendentes podem ser definidos ou devolvidos usando o “TextContent”Atributo. Ele retorna uma concatenação do conteúdo de texto de cada nó da criança. No entanto, uma string vazia é retornada como uma saída, caso o elemento esteja vazio.
Sintaxe
Siga a sintaxe dada para utilizar o “TextContent”Propriedade para obter o texto do elemento HTML:
elemento.TextContent
Exemplo
No exemplo a seguir, criaremos uma lista não ordenada com elementos filhos
- Html
- CSS
- JavaScript
- Nó js
- Reagir
Crie um botão e anexe um “ONCLICK”Evento para ele desencadear o definido“getText ()”Método:
Crie um parágrafo atribuindo um ID a ele, onde a saída será exibida:
Depois de executar o código HTML acima, a saída será a seguinte:
Agora, em um arquivo JavaScript, primeiro, obtenha o elemento usando o “getElementById ()”Método e, em seguida, busque seu texto com a ajuda do“TextContent”Propriedade e armazene -a em uma variável“texto”. Então, chame o “Innerhtml”Propriedade que imprimirá o texto no campo específico em uma única linha com espaços.
função getText ()
Var Text = Documento.getElementById ("Lista").TextContent;
documento.getElementById ("texto").inerhtml = text;
A saída correspondente será a seguinte:
Vamos verificar o segundo método!
Método 2: Obtenha o texto de um elemento HTML usando a propriedade TextContent com a propriedade InnerText
Para obter o texto no mesmo formato, como mostrado em uma página da web, como em um formulário de lista, use o “InnerText”Propriedade com a“TextContent" propriedade.
Sintaxe
A sintaxe a seguir é utilizada para a propriedade InnerText:
elemento.InnerText
Exemplo
No arquivo JavaScript, primeiro, defina uma função “getText ()”Isso acionará o botão Clique para obter o conteúdo de texto da lista não ordenada:
função getText ()
Var Text = Documento.getElementById ("Lista").TextContent;
documento.getElementById ("texto").inerText = text;
Saída
O GIF acima significa que o “InnerText”Propriedade com a“TextContent”Propriedade recebe o texto de um elemento HTML no formato da lista.
Conclusão
Para obter o texto de um elemento HTML, use o “TextContent”Propriedade com a“Innerhtml" e "InnerText”Propriedades. O Innerhtml imprimirá o texto de um elemento em uma ordem embutida, enquanto o InnerText imprime o texto no mesmo formato. Este artigo explicou o procedimento para obter o texto de um elemento usando JavaScript.