Artigos de Tecnologia e Negócios > Front-end

Capturando valor do input: introdução a seletores

Felipe Nascimento
Felipe Nascimento
Imagem de destaque

A secretaria acadêmica de uma escola me pediu para fazer uma tela que mostrasse as informações dos alunos matriculados. Só que existia um problema: cada aluno preencheu o telefone usando traços em lugares diferentes

A listagem dessa maneira ficou um pouco confusa, uma das alternativas para alterar os números seria percorrer cada registro no banco e alterar esses dados um por um, só que como não tenho acesso ao banco de dados, como posso pegar esses valores e formatá-los apenas na visualização ?

Vamos dar uma olhada em como o HTML está disposto:


<section class="container">
<h2>Alunos</h2>
    <table>
        <thead>
            <tr>
            <th>Nome</th>
            <th>Endereço</th>
            <th>Telefone</th>
        </tr>
        </thead>
    <tbody id="tabela-alunos">
        <tr id="Paulo" >
            <td class="info-nome">Paulo</td>
            <td class="info-endereço">Rua Sampaio Moreira</td>
        <td class="info-telefone">11-998877766</td>
      </tr>
.
.
.

Os dados estão em uma tabela. Cada linha representa um aluno, e cada coluna uma informação sobre esse aluno. O que queremos é uma maneira de acessar o campo telefone dentro do HTML e fazer as alterações, de maneira eficiente e automatizada com JavaScript.

Acessando a tabela através das tags

Um modo como podemos acessar o campo de telefone dentro da tabela, é através do método querySelector(). passando como parâmetro a tag `td.


document.querySelector("td");

O retorno do método querySelector() foi:


<td class="info-nome">Paulo</td>

O retorno não foi bem o que queríamos, isso porque o querySelector está procurando no documento HTML o parâmetro que foi passado, e está retornando a primeira vez que esse parâmetro aparece, no nosso caso ele devolveu somente a primeira coluna e não todos os telefones dentro do campo. Então o querySelector não serve para o nosso caso.

Por convenção, fazer a busca por tag não é recomendável. Podem ocorrer mudanças no documento HTML que acabam quebrando o código. Então precisamos de uma maneira de buscar os telefones da tabela e que seja menos propensa a problemas com mudanças.

Seletores

Seletores são usados no CSS para marcar os elementos HTML que serão estilizados, como estamos usando o método querySelector ele nos permite fazer uso de seletores CSS, como id e class, e fazer uma busca mais específica.

Acessando a tabela usando o id

A busca utilizando querySelector e tags HTML não servem para nosso caso. Felizmente temos o método irmão do querySelector o querySelectorAll que ao invés de retornar a primeira vez que o parâmetro aparece, vai retornar todas as vezes.

Agora que já sabemos que podemos deixar nossa busca mais específica com o uso de seletores, vamos fazer uso do id para nossa busca.


document.querySelectorAll("#Paulo");

Agora o retorno já foi um pouco melhor do que com querySelector


<tr id="Paulo">

    <td class="info-nome">Paulo</td>

    <td class="info-endereço">Rua Sampaio Moreira</td>

    <td class="info-telefone">11-998877766</td>

</tr>

Mas de novo só conseguimos trazer as informações de um aluno, mesmo usando o querySelectorAll... Isso aconteceu porque o seletor id define um identificador exclusivo, precisamos então de algo que consiga fazer uma busca mais genérica.

Acessando a tabela usando classe

Como muitos elementos podem pertencer a uma classe ao mesmo tempo, podemos fazer uso do seletor .class, já que todos os campos de telefone dos alunos tem a classe .info-telefone


document.querySelectorAll(".info-telefone");

O retorno do querySelectorAll é parecido com um array:


11-998877766
11-9988-776-65
11-99-92-23-322
1199977-44-11
11-98877-77-77
11-998877766

Agora temos que encontrar uma maneira de iterar por todos os telefones e fazer a alteração de acordo com o padrão escolhido pela escola.

Alterando o telefone dos alunos

Uma maneira de percorrer todos os telefones para fazer a alteração é através do loop for. Depois de iterar por todos os telefones, usamos o método replace, que vai substituir os traços do telefone por strings vazias.


  const alunos = document.querySelectorAll(".info-telefone");

  for (let indice = 0; indice < alunos.length; indice++) {
    const novoTelefone = alunos[indice].textContent.replace(-,'');
    alunos[indice].textContent = novoTelefone;
}

Para saber mais

Além do querySelector() e do querySelectorAll(), existem outros meios de capturar elementos no DOM. Um exemplo é o método getElementById que retorna a referência do elemento através do seu id.

Outro exemplo é o método getElementByClassName que vai retornar um vetor de objetos com todos os elementos filhos que possuem o nome da classe dada.

Se ficou interessado em como o Javascript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação front-end. Nela, você verá como programar em Javascript, utilizar expressões regulares, entre outras coisas.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana