Neste artigo você vai aprender a como usar o querySelectorAll para selecionar elementos filhos, facilitando a seleção de elementos
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
No mundo do desenvolvimento web, a manipulação de elementos do Document Object Model (DOM) é uma habilidade essencial.
Uma das técnicas mais comuns para acessar os elementos do DOM é usar o método querySelectorAll.
Neste artigo, vamos discutir como usar o querySelectorAll para selecionar os elementos filhos em JavaScript.
O que é o querySelectorAll?
O método querySelectorAll é uma função incorporada em JavaScript que retorna uma NodeList estática (não uma matriz real) de elementos no documento que correspondem a um grupo de seletores de CSS específicos.
A lista retornada incluirá todos os elementos descendentes que correspondem aos seletores fornecidos.
Selecionando elementos filhos com querySelectorAll
Ao usar o querySelectorAll para selecionar os elementos filhos, você precisa fornecer o seletor de CSS correto que representa os elementos filhos.
Por exemplo, se você tem uma lista não ordenada com a classe “myList” e quer selecionar todas as listas de itens como elementos filhos, você pode fazer isso da seguinte maneira:
let listItems = document.querySelectorAll('.myList li');
Neste exemplo, o querySelectorAll('li') está sendo chamado no elemento retornado por document.querySelector('.myList'), resultando na seleção de todos os elementos li que são filhos diretos do elemento com a classe ‘myList’.
Entendendo a diferença entre ‘ ‘ e ‘>’
Ao trabalhar com querySelectorAll, é importante entender a diferença entre os seletores ‘ ‘ (espaço) e ‘>’.
O ‘ ‘ (espaço) é um combinador descendente que seleciona elementos que são descendentes de um elemento específico.
Por outro lado, o ‘>’ é um combinador de filho que seleciona elementos que são filhos diretos de um elemento específico.
Para exemplificar, suponha que temos a seguinte estrutura HTML:
<div class="myDiv">
<p>Parágrafo 1</p>
<div>
<p>Parágrafo 2</p>
</div>
</div>
Se você usar querySelectorAll('.myDiv p'), ele selecionará ambos os elementos p.
No entanto, se você usar querySelectorAll('.myDiv > p'), ele selecionará apenas o primeiro elemento p que é um filho direto do elemento com a classe ‘myDiv’.
Trabalhando com a NodeList retornada
Como mencionado anteriormente, querySelectorAll retorna uma NodeList, não uma matriz real.
Embora NodeList e Array sejam semelhantes em alguns aspectos, eles têm diferenças significativas.
Por exemplo, Array tem métodos como map(), filter(), e reduce() que não estão disponíveis em NodeList.
No entanto, você pode converter facilmente uma NodeList em uma matriz usando o método Array.from(). Aqui está um exemplo:
let listItems = document.querySelector('.myList li');
let listItemsArray = Array.from(listItems);
Agora, listItemsArray é uma matriz real, e você pode usar todos os métodos de matriz disponíveis.
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
E chegamos ao fim do artigo sobre como utilizar o querySelectorAll para selecionar elementos filhos!
Usar querySelectorAll para selecionar elementos filhos é uma técnica poderosa que pode tornar seu código mais limpo e fácil de entender.
No entanto, é importante lembrar que nem todos os métodos de matriz estão disponíveis na NodeList retornada por querySelectorAll.
Portanto, pode ser necessário converter a NodeList em uma matriz, especialmente se você precisa usar métodos de matriz como map, filter ou reduce.
No fim das contas, o conhecimento de como manipular o DOM é uma habilidade fundamental para qualquer desenvolvedor JavaScript.
Quer você esteja criando uma aplicação web do zero ou trabalhando em um projeto existente, o querySelectorAll é uma ferramenta valiosa que pode ajudar a tornar seu trabalho mais eficiente.
Esperamos que este artigo tenha ajudado a esclarecer como usar o querySelectorAll para selecionar os elementos filhos. Pratique essa técnica e veja como ela pode melhorar seu código!
Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.
Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!