Como pegar o elemento pai de uma div em JavaScript

Neste artigo você vai aprender a como pegar o elemento pai de uma div com JavaScript, vem ver como é simples fazer isso!

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

Em desenvolvimento web, muitas vezes precisamos acessar o elemento pai de uma div para realizar alguma manipulação em seu conteúdo.

Isso pode ser necessário para adicionar ou remover classes, alterar o texto ou atributos, entre outras tarefas.

Neste artigo, vamos mostrar como pegar o elemento pai de uma div em JavaScript.

Com algumas técnicas simples, você será capaz de acessar o elemento pai de uma div de forma fácil e eficiente.

Utilizando o método parentElement()

Uma das maneiras mais comuns de pegar o elemento pai de uma div em JavaScript é utilizando o método parentElement().

Esse método retorna o elemento pai direto do elemento selecionado.

Por exemplo, imagine que você tem uma div dentro de outra div em uma página HTML.

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

Para acessar o elemento pai direto da primeira div, você pode fazer o seguinte:

const divFilha = document.querySelector('.minha-div-filha');
const divPai = divFilha.parentElement;

Nesse exemplo, o método querySelector() é usado para selecionar a div com a classe “minha-div-filha”.

Em seguida, o método parentElement() é utilizado para pegar o elemento pai direto da div selecionada. O resultado dessa operação é armazenado na variável “divPai”.

Utilizando o método closest()

Outra maneira de obter o elemento pai de uma div em JavaScript é utilizando o método closest().

Esse método permite que você selecione o elemento pai mais próximo que corresponda a um seletor CSS específico.

Por exemplo, imagine que você tem uma div dentro de uma outra div com a classe “minha-div-pai”.

Para selecionar o elemento pai mais próximo com essa classe, você pode fazer o seguinte:

const divFilha = document.querySelector('.minha-div-filha');
const divPai = divFilha.closest('.minha-div-pai');

Nesse exemplo, o método querySelector() é usado para selecionar a div com a classe “minha-div-filha”.

Em seguida, o método closest() é utilizado para pegar o elemento pai mais próximo que corresponde à classe “minha-div-pai”. O resultado dessa operação é armazenado na variável “divPai”.

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

Conclusão

Pegar o elemento pai de uma div em JavaScript é uma tarefa comum no desenvolvimento web, e existem diversas maneiras de fazer isso.

Neste artigo, mostramos duas das técnicas mais comuns: utilizando o método parentElement() e o método closest().

Com essas técnicas em mãos, você será capaz de pegar facilmente o elemento pai de uma div 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 obter o elemento pai de uma div em JavaScript.

Se tiver alguma dúvida ou sugestão de tema para os próximos artigos, fique à vontade para nos enviar uma mensagem.

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.

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 pegar o elemento pai de uma div 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!

Bloco explicando o parentNode, que muita gente confunde com o parentElement

Os dois pegam o pai, mas tem uma diferença que já me pegou de surpresa uma vez

O parentElement só retorna o pai se ele for um elemento, se não for, ele devolve null

Já o parentNode retorna qualquer nó pai, inclusive nós que não são elementos

Na prática, dentro de uma div comum os dois vão te dar o mesmo resultado

A diferença aparece quando você sobe até o topo do documento: o parentElement do <html> é null, mas o parentNode ainda te devolve o document

Mostrar o uso: const divFilha = document.querySelector(‘.minha-div-filha’); const pai = divFilha.parentNode;

Regra de bolso: se você quer garantir que só vai trabalhar com elemento, fica no parentElement

Bloco sobre pegar o pai do pai, ou o avô da div

Às vezes o elemento que tu quer não é o pai direto, é o pai do pai

Dá pra encadear o parentElement: const avo = divFilha.parentElement.parentElement;

Funciona, mas tem um perigo: se um dos níveis não existir, tu toma um erro na cara

Por isso, quando o objetivo é subir vários níveis até achar um ancestral com uma classe ou tag específica, o closest costuma ser mais seguro e legível

Ele sobe a árvore sozinho até encontrar o seletor que tu passou, sem tu precisar contar quantos níveis tem no caminho

FAQ curto respondendo as dúvidas que vêm junto com esse tema:

Qual a diferença entre parentElement e parentNode? Os dois pegam o pai. O parentElement devolve null se o pai não for um elemento, o parentNode devolve qualquer nó pai. No dia a dia, dentro de divs, dão o mesmo resultado

Quando usar closest no lugar de parentElement? Usa o closest quando tu não sabe exatamente quantos níveis precisa subir e quer chegar num ancestral que bata com um seletor CSS. O parentElement é pra quando tu quer só o pai direto

O parentElement pode retornar null? Pode, quando o elemento não tem um pai que seja elemento, como no caso do <html>. Vale checar antes de usar o resultado