Neste artigo você vai aprender a como pegar o atributo data-id, que pode estar em uma das tags do seu HTML
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); // 123456Conforme 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!