JavaScript

Como pegar o atributo data-id com JavaScript

12 de julho de 2021

Como pegar o atributo data-id com JavaScript

Neste artigo você vai aprender a como pegar o atributo data-id, que pode estar em uma das tags do seu HTML

Como pegar o atributo data-id capa

Fala programador(a), beleza? Bora aprender mais sobre atributos, DOM e também JavaScript!

O atributo data-id é apenas mais um atributo de HTML, não tem nada de especial nele, é importante que você saiba disso

Pois assim você poderá extrair o valor de qualquer atributo, seguindo o passo a passo de post

Primeiramente vamos selecionar o elemento que queremos saber o valor do data-id

E por fim vamos utilizar o método getAttribute com o parâmetro de data-id neste elemento, isso faz com que o valor seja armazenado nesta execução

Então podemos colocar em uma variável e o utilizar

Veja um exemplo prático da situação:

<div id="produto-a" data-id="123456"></div>

Este será o nosso HTML, que provavelmente é diferente do seu, mas a lógica será a mesma

Veja agora o JavaScript necessário:

const el = document.querySelector("#produto-a");

const dataId = el.getAttribute("data-id");

console.log(dataId); // 123456

Conforme explicado anteriormente: primeiramente selecionamos o elemento

Depois pegamos o valor do atributo data-id com getAttribute e pronto!

Podemos utilzá-lo onde for necessário =)

Conclusão

Neste artigo você aprendeu a como pegar o atributo data-id com JavaScript

Utilizamos primeiro um método de seleção de elemento, pois precisamos saber de quem o atributo será resgatado

Depois pegamos o valor do atributo com o método getAttribute e pronto!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x