Neste artigo você vai aprender a como encontrar o elemento filho de um pai com JavaScript, utilizando as melhores práticas!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
Introdução
Uma das tarefas mais comuns ao manipular o DOM (Document Object Model) com JavaScript é localizar e manipular os elementos filhos de um elemento pai.
Se você é um iniciante em JavaScript ou simplesmente precisa de um refresco sobre o assunto, este artigo será um ótimo recurso para você.
Vamos discutir várias maneiras de encontrar o elemento filho de um elemento pai usando JavaScript.
Usando a Propriedade children
O JavaScript fornece uma propriedade children para qualquer objeto de elemento do DOM. Essa propriedade retorna uma coleção de HTML ao vivo dos elementos filhos do elemento.
Por exemplo, se você tiver um elemento <div> com vários elementos <p> dentro dele, você pode usar a propriedade children para acessar esses elementos <p>.
let div = document.getElementById('myDiv');
let p = div.children;
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
Neste exemplo, p é uma coleção de elementos que são filhos diretos da <div>. O loop for percorre todos os elementos e os exibe no console.
Usando a Propriedade firstElementChild e lastElementChild
Se você só precisa encontrar o primeiro ou último elemento filho de um elemento pai, o JavaScript fornece as propriedades firstElementChild e lastElementChild para isso.
let div = document.getElementById('myDiv');
let firstChild = div.firstElementChild;
let lastChild = div.lastElementChild;
console.log(firstChild); // Exibe o primeiro elemento filho da div
console.log(lastChild); // Exibe o último elemento filho da div
Neste exemplo, firstChild e lastChild são os primeiros e últimos elementos filhos da <div>, respectivamente.
Usando a Função querySelector
A função querySelector do JavaScript é outra maneira poderosa de localizar elementos filhos.
Esta função permite que você use qualquer seletor CSS para localizar um elemento dentro do elemento no qual a função é chamada.
let div = document.getElementById('myDiv');
let p = div.querySelector('p');
console.log(p); // Exibe o primeiro elemento <p> que é filho da div
Neste exemplo, querySelector é usado para localizar o primeiro elemento <p> que é um elemento filho da <div>.
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Encontrar o elemento filho de um elemento pai é uma tarefa que você encontrará frequentemente como desenvolvedor JavaScript.
Felizmente, o JavaScript fornece várias maneiras eficazes de fazer isso, como as propriedades children, firstElementChild e lastElementChild, bem como a função querySelector.
Cada um deles tem seus próprios usos e vantagens, então é útil entender todos eles.
Com este conhecimento em mãos, você estará bem equipado para manipular o DOM de maneira eficiente em suas aplicações JavaScript.
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!