Como pegar atributos da div pai através do elemento filho

Neste artigo você vai aprender a como pegar atributos da div pai através do elemento filho, utilizando recursos do DOM do JavaScript

Conteúdo também disponível em vídeo:

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

Vamos primeira mente simular a situação com um HTML válido

Vamos criar uma div como container de um botão, que será o elemento filho e responsável por resgatar os dados do elemento pai

Veja nosso HTML:

<div class="container">
  <button id="get-parent-element">Clique aqui</button>
</div>

Agora vamos ao JavaScript necessário, nele vamos criar um evento de click no botão

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

E por meio deste evento, regatar os detalhes do elemento pai

var btn = document.querySelector("#get-parent-element");

btn.addEventListener("click", function() {
	
  var parent = this.parentNode;
  
  console.log(parent);
  console.log(parent.classList);

});

Podemos acessar o elemento pai com a propriedade parentNode, utilizamos também o this neste caso

O this se refere ao botão que foi clicado

Desta maneira, nos console.logs recebemos todos os dados do elemento pai

No segundo pegamos as classes do mesmo, pela propriedade classList

Lembre-se que o evento de click não é necessário, você pode identificar o elemento filho por meio de um seletor também

E resgatar os dados do pai da mesma maneira em que fizemos no exemplo do artigo

A parte do evento apenas facilita para o entendimento do exemplo

Conclusão

Neste artigo você aprendeu a como pegar atributos da div pai através do elemento filho

Utilizamos a propriedade parentNode, que resgata o elemento pai de um determinado elemento filho

Determinamos o elemento filho por meio de um evento de click em um botão, mas isso não é necessário para o resgate dos dados do elemento ancestral

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Explica que existem duas propriedades pra subir um nível na árvore do DOM, e o porquê de cada uma

O parentNode pega o nó pai seja ele qual for, inclusive o próprio document

O parentElement pega só quando o pai é de fato um elemento HTML, senão retorna null

Na prática, dentro de uma div ou de um botão os dois entregam o mesmo resultado, mas se você subir até o topo da árvore a diferença aparece

Regra simples: se você quer garantir que está pegando uma tag, vai de parentElement, se tanto faz, parentNode resolve

O exemplo mostra classList, mas dá pra ir direto num atributo específico do pai

Com getAttribute você lê qualquer atributo pelo nome, tipo id, data-algo ou o próprio class

Se o atributo for um data-attribute (data-id, data-user e por aí vai), o dataset deixa a leitura mais limpa

[bloco de código: var parent = this.parentElement; console.log(parent.getAttribute(‘id’)); console.log(parent.dataset.id);]

Assim você não pega o elemento inteiro, pega só o valor que interessa

Auto-interrupção pra antecipar o caso real: nem sempre o pai direto é quem tem o dado

Às vezes o atributo que você quer está no avô ou mais acima

Dá pra encadear parentElement.parentElement, mas isso vira uma bagunça rápido e quebra fácil se o HTML muda

O closest() resolve melhor: você passa um seletor e ele sobe a árvore até achar o ancestral que bate

[bloco de código: var container = this.closest(‘.container’); console.log(container);]

Se liga que o closest também considera o próprio elemento na busca

Bloco de FAQ com perguntas diretas e respostas curtas:

Qual a diferença entre parentNode e parentElement? O parentNode retorna o nó pai de qualquer tipo, o parentElement só retorna se o pai for um elemento HTML, senão dá null

Como pegar a classe da div pai? Você acessa o pai com parentElement e lê a propriedade classList, ou usa getAttribute(‘class’) pra pegar a string crua

Dá pra pegar o pai sem evento de click? Dá sim, é só identificar o elemento filho por um seletor (querySelector) e acessar o parentElement dele direto, o evento no exemplo é só pra facilitar o entendimento

Como pegar o avô do elemento? Encadeando parentElement.parentElement ou, melhor, usando closest() com o seletor do ancestral que você procura