Capturando valor do input: introdução a seletores
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.