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.

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

Leia também

• Como encontrar o elemento filho de um pai com JavaScript
• Como pegar o tipo de um elemento HTML com JavaScript