Como selecionar elementos filhos em JavaScript

Ao trabalhar com JavaScript e manipulação do DOM, pode ser necessário selecionar elementos filhos de um elemento pai específico para realizar determinadas ações, como adicionar estilos, modificar conteúdo ou manipular eventos.

Neste artigo, vamos explorar diferentes maneiras de selecionar elementos filhos em JavaScript, permitindo que você aprenda a realizar essa tarefa fundamental.

Utilizando o método querySelectorAll

O método querySelectorAll é uma poderosa função do JavaScript que nos permite selecionar elementos no DOM com base em um seletor CSS.

Para selecionar elementos filhos de um elemento pai, podemos utilizar o seletor CSS combinado com o método querySelectorAll. Veja o exemplo abaixo:

const elementosFilhos = document.querySelectorAll('.elemento-pai .elemento-filho');

elementosFilhos.forEach(elemento => {
  // Realize as ações desejadas com cada elemento filho
  console.log(elemento.textContent);
});

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

No exemplo acima, utilizamos o seletor CSS .elemento-pai .elemento-filho para selecionar todos os elementos filhos com a classe .elemento-filho dentro de um elemento pai com a classe .elemento-pai.

Em seguida, utilizamos o método for para iterar sobre cada elemento filho selecionado e realizar as ações desejadas.

Utilizando a propriedade children

Outra forma de selecionar elementos filhos é utilizando a propriedade children de um elemento pai. A propriedade children retorna uma coleção de elementos filhos diretos do elemento pai. Veja o exemplo abaixo:

const elementoPai = document.querySelector('.elemento-pai');
const elementosFilhos = elementoPai.children;

for (let i = 0; i < elementosFilhos.length; i++) {
  // Realize as ações desejadas com cada elemento filho
  console.log(elementosFilhos[i].textContent);
}

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

No exemplo acima, selecionamos o elemento pai com a classe .elemento-pai utilizando o método querySelector. Em seguida, utilizamos a propriedade children para obter a coleção de elementos filhos diretos desse elemento pai.

Por fim, utilizamos um loop for para iterar sobre cada elemento filho e realizar as ações desejadas.

Conclusão

Selecionar elementos filhos em JavaScript é uma tarefa fundamental quando estamos trabalhando com manipulação do DOM.

Neste artigo, exploramos duas maneiras de realizar essa seleção: utilizando o método querySelectorAll com um seletor CSS e utilizando a propriedade children.

Agora você está equipado com as ferramentas necessárias para selecionar elementos filhos e realizar as ações desejadas em seus projetos JavaScript.

Utilize essas técnicas para criar interações dinâmicas e personalizadas em seu site ou aplicação.