Texto de: Letícia Garcez
Introdução
HTML e JavaScript são duas tecnologias essênciais para a web da atualidade. Apesar de serem tecnologias bem diferentes e servirem propósitos distintos, a união dessas tecnologias permite que as páginas HTML se tornem muito mais dinâmicas e iterativas, e neste artigo veremos como podemos selecionar elementos HTML utilizando JavaScript para que possamos utilizar esses elementos para implementar comportamentos na nossa aplicação.
O que são seletores?
Seletores são características que podem identifcar tags HTML de alguma forma e que podem ser utilizados para selecionar uma tag (ou conjunto de tags) bem como seu conteúdo. Para tornar a coisa mais fácil, podemos dar uma olhada no código abaixo, que trás um exemplo de código HTML com alguns seletores.
<div id = "frase-motivacional" class = "conteudo">
<p id = "frase-do-dia" class= "texto-formatado" >
Comece acreditando que é possível
</p>
</div>
<div id = "nome-formulario" class = "conteudo">
<input type="text" name="nome" />
</div>
Nesse código, temos vários seletores, como os nomes das tags (div, p e input), as classes (conteudo, texto-formatado), os ids (frase-motivacional, frase-do-dia, nome-formulario) e propriedades como type e name. Todas essas são características das tags que podem ser utilizadas para identificá-las de alguma forma.
Por exemplo, se eu quiser saber quantas tags <div> existem na aplicação, eu posso contar quantas vezes a tag de abertura com esse nome aparece. Se eu quiser saber as tags que possuem a classe conteudo, basta procurar por essa classe e ver a quais tags ela está associada e assim por diante. Nós podemos agrupar as tags por qualquer uma dessas características, e consequentemente, podemos selecioná-las também por qualquer uma dessas características.
Agora que já entendemos o que é um seletor, podemos entrar nos métodos que o JavaScript nos disponibiliza para que possamos selecionar estes seletores. É importante salientar aqui que para utilizar os métodos seletores, precisamos especificar o objeto onde estes métodos vão ser utilizados. Em uma página web, esse objeto é o document, então os seletores sempre serão chamados na forma document.NOME-DO-METODO().
getElementById()
Este método é o mais simples de todos, e retorna o elemento HTML que contém o id passado como parâmetro para o método. Caso mais de um elemento possua o id, a função retorna o primeiro elemento encontrado. Veja o código abaixo.
let frase = document.getElementById("frase-do-dia");
Esse código cria uma variável chamada frase, e armazena nessa variável o elemento cujo id é igual a frase-do-dia. Caso este id não exista dentro do documento HTML, o retorno da função é null.
getElementsByClassName()
Como o próprio nome já diz, essa função vai retornar os elementos que possuem uma mesma classe passada. Enquanto a função getElementById retorna um único elemento, esta função retorna uma HTMLCollection, contendo todos os elementos que possuirem a classe. Se não houver nenhum elemento que atenda essa correspondência, o resultado será uma HTMLCollection vazia. Um exemplo de utilização pode ser visto abaixo.
const amigos = document.getElementsByClassName("amigo");
const inimigos = document.getElementsByClassName("inimigo");Para acessar os elementos das coleções, podemos utilizar a notação de colchetes utilizada para acessar elementos de arrays, ou seja algo como inimigos[0] ou amigos[1].
getElementsByTagName()
Esta função é bem similar à anterior, com a diferença que cria uma HTMLCollection com todas as tags com o mesmo nome. Caso nenhuma tag com aquele nome seja encontrada, o retorno é uma HTMLCollection vazia.
let nomeUsuario = document.getElementsByTagName("nome");Assim como no método getElementsByClassName(), os elementos desta coleção também devem ser acessados com a notação de colchetes.
getElementsByName()
Este método retorna uma NodeList contendo os elementos de código selecionados através do atributo name das tags HTML, ou uma NodeList vazia caso nenhum elemento com aquele atributo name seja encontrado.
let opiniaoUsuario = document.getElementsByName("opiniao");Assim como nos exemplos anteriores deve ser acessado com a notação de colchetes.
querySelector()
Diferentemente dos outros métodos mostrados até agora, o querySelector() não recebe um atributo de uma tag HTML ou uma tag como parâmetro, mas recebe o mesmo seletor que seria utilizado em CSS, no formato string. É importante no CSS utilizamos "." para indicar classes e "#" para indicar ids.
let terceiroAno = document.querySelector(".terceiro-ano");
let paragrafo = document.querySelector("p");
let fraseDia = document.querySelector("div#frase-motivacional p#frase-do-dia");
let conteudos = document.querySelector(".conteudo");
Todas as sintaxes utilizadas no código acima são válidas. Podemos utilizar o querySelector() para selecionar por id, por classe ou por uma combinação destes elementos. Um ponto importante do querySelector(), é que essa função só retorna o primeiro elemento que corresponde ao seletor ou null caso nenhum elemento faça essa correspondência. Isso significa que a variável conteudos só vai receber o primeiro elemento com a classe conteudo, o que pode não ser o comportamento desejado. Se quisermos obter todos os elementos que combinam com um mesmo seletor, devemos utilizar o próximo método da lista.
querySelectorAll()
O querySelectorAll() é bem similar ao método querySelector(), mas diferentemente deste, retorna uma NodeList com todos os elementos que correspondem ao seletor criado. Os parâmetros passados para a função seguem a mesma formatação dos parâmetros da função querySelector e caso nenhum elemento seja encontrado com o seletor especificado, o retorno é uma NodeList vazia.
Considerações finais
Ao longo desse artigo nós conhecemos diferentes formas de selecionar elementos HTML através do JavaScript e vimos também as diferenças entre eles de forma resumida. Caso você queira informações mais aprofundadas sobre algum desses métodos, recomendo que dê uma olhada no MDN que trás informações bem detalhadas sobre diversas funcionalidades ligadas à web.
Bons estudos!
