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

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!

Existe um segundo caminho pra pegar esse valor, e ele é bem direto

Todo atributo que começa com data- vira uma propriedade dentro do dataset do elemento

‘E como fica o nome?’ O data-id vira dataset.id, é só tirar o data- e pegar o que sobra

Veja na prática:

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

const dataId = el.dataset.id;

console.log(dataId); // 123456

O resultado é o mesmo do getAttribute, muda só a forma de chegar nele

Use o que for mais confortável pra ti =)

Aqui tem uma pegadinha que já ferrou muita gente

Quando o atributo tem hífen, tipo data-id-produto, o dataset converte pra camelCase

Ou seja, data-id-produto vira dataset.idProduto

Já com o getAttribute nada muda, tu passa o nome exato: getAttribute("data-id-produto")

Tome cuidado com isso, é fácil escorregar e ficar procurando bug onde não tem

Qual a diferença entre getAttribute e dataset?

Os dois pegam o valor de um data-attribute, o getAttribute funciona pra qualquer atributo do HTML e o dataset é atalho só pros que começam com data-

Como eu mudo o valor do data-id?

Dá pra usar setAttribute, assim: el.setAttribute("data-id", "999"), ou ir direto pelo dataset: el.dataset.id = "999"

O data-id serve pra guardar qualquer coisa?

Serve pra guardar um dado que tu quer levar do HTML pro JavaScript, tipo um id de produto, e ele não tem nada de especial, é atributo comum como qualquer outro