JavaScript

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

8 de fevereiro de 2021

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

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

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x