Chegamos a mais um post da minha saga de estudos em JavaScript.
No post de hoje irei falar sobre formas de selecionarmos elementos através do DOM, com o intuito de manipularmos eles.
Quando trabalhamos com o DOM, podemos adicionar, remover e alterar elementos do nosso HTML, mas para isso, existem alguns passos a serem seguidos.
O primeiro (que será abordado neste post) é decidir qual elemento dá página queremos manipular e após isso, buscarmos sua referência no DOM.
Essa ação de buscar o elemento no DOM, chamamos de Quering the DOM, traduzindo ficaria algo como buscando no DOM.
Imaginem o seguinte documento HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Query Selector e Query Selector All</title>
</head>
<body>
<h1>Query Selector e Query Selector All</h1>
<div>
<p>Hello World!</p>
<p>Oi</p>
<p class="error">Essa é uma mensagem de erro</p>
</div>
<div class="error">Outra mensagem de erro</div>
</body>
</html>
Vamos iniciar a realização das buscas pelas referência dos elementos no DOM.
Query Selector (querySelector)
No método querySelector, iremos buscar o elemento pelo seletor CSS passado por argumento, entre ''.
Este método irá retornar o primeiro elemento que tenha o seletor informado.
Abaixo irei obter a referência do primeiro parágrafo
const firstParagraph = document.querySelector('p')
Isso faz com que o DOM seja consultado (de cima para baixo), a referência da primeira tag p, será obtida e atribuída a variável firstParagraph, e as demais tags p serão ignoradas.
console.log(firstParagraph) // <p>Hello World!</p>
Agora irei buscar no DOM a referência da última tag p, que possui a classe error e irei atribuir a sua referência a uma variável.
const paragraphError = document.querySelector('.error')
No caso acima, foi informado o nome da classe CSS para obter a referência do parágrafo que eu queria.
console.log(paragraphError) // <p class="error">Essa é uma mensagem de erro</p>
Mas conforme pode ser observado, usamos o nome da classe CSS como argumento error, mas, também existe uma div com essa mesma classe.
Porém, conforme informado acima, esse método pega a referência apenas do primeiro item encontrado.
Como isso, para selecionar a div com a classe error, devemos especificar isso como argumento do método querySelector.
const divError = document.querySelector('div.error')
console.log(divError) // <div class="error">Outra mensagem de erro</div>
Query Selector All (querySelectorAll)
Existe a possibilidades de obtermos a referência de múltiplos elementos, para isso iremos usar o métodos querySelectorAll.
Este método também irá receber como argumento o seletor CSS que deve ser encontrado.
Fazendo mais uma vez com que o DOM seja lido (de cima para baixo), mas desta vez, buscando TODOS os elementos que possuam o seletor informado como argumento.
Abaixo irei buscar todos os parágrafos do documento.
const paragraphs = document.querySelectorAll('p')
console.log(paragraphs) // NodeList(3) [p, p, p.error]
Como pode ser observado, obtivemos uma NodeList com a referência de todos os elementos p do documento HTML.
Uma NodeList é uma lista de nós, é similar a um array, mas não é um array, o que significa dizer que não é possível utilizar todos os métodos de array nelas.
Mas podemos realizar algumas ações nessas listas, como por exemplo, utilizarmos a anotação de colchetes [] para obtermos o item em uma posição específica da lista.
Buscando o segundo parágrafo da NodeList:
console.log(paragraphs[1]) // <p>Oi</p>
E também é possível percorrer uma NodeList utilizando o método forEach.
paragraphs.forEach(paragraph => {
console.log(paragraph)
})
// Output
/*
<p>Hello World!</p>
<p>Oi</p>
<p class="error">Essa é uma mensagem de erro</p>
*/
Também podemos obter todos os elementos que possuam a mesma classe:
const allElementsWithClassError = document.querySelectorAll('.error')
console.log(allElementsWithClassError) // NodeList(2) [p.error, div.error]
Vou deixar um link da MDN para mais detalhes sobre o querySelector e querySelectorAll
Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!
Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:
Top comments (0)