Como selecionar elementos filhos em JavaScript: aprenda a fazer

Neste artigo você vai aprender a como selecionar elementos filhos em JavaScript, vem conferir como é simples!

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Quando estamos desenvolvendo uma aplicação web, muitas vezes precisamos acessar os elementos filhos de um elemento pai.

Isso pode ser necessário para realizar alguma manipulação no conteúdo desses elementos, por exemplo.

Neste artigo, vamos mostrar como selecionar elementos filhos em JavaScript.

Com algumas técnicas simples, você será capaz de acessar esses elementos de forma fácil e eficiente.

Utilizando o método querySelectorAll()

Uma das maneiras mais comuns de selecionar elementos filhos em JavaScript é utilizando o método querySelectorAll().

Esse método permite que você selecione todos os elementos filhos de um elemento pai que correspondam a um seletor CSS específico.

Por exemplo, imagine que você tem uma lista de itens em uma página HTML, e cada item está dentro de um elemento <li>.

Para selecionar todos os elementos <li> dessa lista, você pode fazer o seguinte:

const lista = document.querySelector('#minha-lista');
const itens = lista.querySelectorAll('li');

Nesse exemplo, o método querySelectorAll() é usado para selecionar todos os elementos <li> que são filhos do elemento com o ID “minha-lista”.

O resultado dessa operação é armazenado na variável “itens”.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Utilizando o método children

Outra maneira de selecionar elementos filhos em JavaScript é utilizando o método children.

Esse método retorna uma lista de todos os elementos filhos diretos de um elemento pai.

Por exemplo, se você tem um elemento <div> que contém vários elementos <p>, pode selecionar todos esses elementos da seguinte forma:

const div = document.querySelector('#minha-div');
const paragrafos = div.children;

Nesse exemplo, o método children é usado para selecionar todos os elementos filhos diretos do elemento com o ID “minha-div”.

O resultado dessa operação é armazenado na variável “paragrafos”.

Utilizando o método getElementById()

Se você sabe que o elemento filho que deseja selecionar tem um ID exclusivo, pode utilizar o método getElementById() para selecioná-lo diretamente.

Por exemplo, imagine que você tem um elemento <div> com o ID “minha-div”, e dentro dele há um elemento <p> com o ID “meu-paragrafo”.

Você pode selecionar esse elemento diretamente da seguinte forma:

const paragrafo = document.getElementById('meu-paragrafo');

Nesse exemplo, o método getElementById() é usado para selecionar o elemento com o ID “meu-paragrafo”. O resultado dessa operação é armazenado na variável “paragrafo”.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Selecionar elementos filhos em JavaScript é uma tarefa comum no desenvolvimento web, e existem diversas maneiras de fazer isso.

Neste artigo, mostramos três das técnicas mais comuns: utilizando o método querySelectorAll(), o método children e o método getElementById().

Com essas técnicas em mãos, você será capaz de selecionar facilmente os elementos filhos que precisa para realizar as manipulações que desejar.

Lembre-se de sempre utilizar as melhores práticas de programação para manter seu código organizado e eficiente.

Esperamos que este artigo tenha sido útil para você aprender a selecionar elementos filhos em JavaScript.

Se tiver alguma dúvida ou sugestão, deixe um comentário abaixo. E não se esqueça de compartilhar esse conhecimento com seus amigos

e colegas de trabalho que também possam se beneficiar dessas técnicas.

Lembre-se também de sempre buscar atualizar seus conhecimentos e habilidades em programação web.

A tecnologia está em constante evolução, e é importante estar sempre por dentro das novidades para se manter competitivo no mercado de trabalho.

Por fim, não deixe de conferir outros artigos e tutoriais em nosso site, que têm como objetivo ajudar a aprimorar suas habilidades em desenvolvimento web e programação em geral.

Agradecemos por ter lido este artigo e esperamos ter contribuído para o seu aprendizado em selecionar elementos filhos em JavaScript. Até a próxima!

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!

Uma seção curta explicando por que existem os dois e quando cada um serve

Aqui vale a parada pra definir o conceito antes de seguir

O children só te devolve os elementos filhos, tipo <p>, <li>, <div>

Já o childNodes devolve TUDO que está dentro do pai, incluindo os nós de texto e os espaços em branco entre as tags

�É aquele detalhe que já ferrou muita gente: você faz um for no childNodes esperando só as tags e vem espaço no meio

Então a regra prática: quer só os elementos? Vai de children

Exemplo mostrando os dois lado a lado com o mesmo pai pra ver a diferença no resultado

Mostrar firstElementChild e lastElementChild como forma direta de pegar o filho da ponta sem precisar de índice

Muita vez você não quer todos os filhos, quer só o primeiro ou o último

Exemplo pegando o primeiro e o último item de uma lista a partir do elemento pai

E um aviso pro leitor não cair na pegadinha: firstChild (sem o ‘Element’) pode te devolver um nó de texto em vez da tag, por isso o firstElementChild costuma ser o que você realmente quer

Ensinar o passo que vem logo depois de selecionar: iterar

Selecionar é metade do trabalho, na prática você quase sempre quer fazer algo com cada filho

Mostrar um for…of ou um forEach rodando sobre o resultado, aplicando algo simples em cada item (mudar texto, adicionar classe)

Vale o aviso: o children devolve uma HTMLCollection e o querySelectorAll devolve uma NodeList, e isso muda o que você consegue chamar direto

Por isso, quando o resultado vier do children, converter pra array com Array.from antes de sair usando forEach evita dor de cabeça

Um resumo comparativo curto ligando cada método ao cenário certo

Quer todos os filhos que batem com um seletor CSS? querySelectorAll

Quer só os filhos diretos, sem se preocupar com seletor? children

Já sabe o ID exato do elemento? getElementById vai direto no ponto

É o tipo de resumo que o leitor rola até o fim procurando pra decidir rápido

Um bloco de FAQ curto respondendo dúvidas diretas do tema:

Como selecionar apenas os filhos diretos de um elemento? Use children, que ignora os netos e traz só o primeiro nível

querySelectorAll pega filhos de qualquer nível? Sim, ele varre toda a descendência a partir do pai, não só os filhos diretos, esse é um ponto que confunde bastante

Como contar quantos filhos um elemento tem? Pelo length do resultado, tanto no children quanto no querySelectorAll

queryS electorAll devolve um array? Não exatamente, é uma NodeList; pra usar métodos de array converta com Array.from