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
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