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

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