Acessando data-* com dataset em JavaScript
Leia e escreva atributos de dados personalizados por meio da API dataset.
Acessando data-* com dataset em JavaScript é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que é a API dataset
Todo elemento HTML disponibiliza seus atributos data-* por meio da propriedade dataset — um DOMStringMap que associa nomes de atributos a valores sem exigir chamadas a getAttribute().
Mapeamento de atributo para propriedade
data-user-id se torna el.dataset.userId. Os hífens nos nomes dos atributos são convertidos para camelCase na propriedade dataset. Para acessar data-item-count, use el.dataset.itemCount.
Leitura de valores
Leia um atributo de dados: const id = el.dataset.userId. Todos os valores de dataset são cadeias de caracteres — converta valores numéricos com Number() ou parseInt() conforme necessário. Atributos inexistentes retornam undefined, não null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Escrita de valores
Defina um atributo de dados por meio de dataset: el.dataset.state = "active". Isso cria ou atualiza o atributo HTML data-state. A alteração do atributo é refletida imediatamente no DOM e pode ser observada por MutationObserver.
Exclusão de valores
Exclua um atributo de dados: delete el.dataset.userId. O atributo data-user-id correspondente é removido do elemento. Você também pode usar el.removeAttribute("data-user-id") para fazer uma remoção explícita.
Iteração sobre dataset
dataset é um DOMStringMap — percorra-o com um laço for...in ou expanda-o em Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Isso é útil para ler em lote todos os atributos de dados de um elemento.
Uso de dataset para o estado do componente
Armazene o estado leve de um componente em atributos de dados, em vez de campos ocultos ou variáveis JavaScript. Um componente de abas armazena o índice da aba ativa em data-active-tab no contêiner, que pode ser lido por qualquer script sem uma variável compartilhada.
Delegação de eventos com dataset
Em uma lista de itens, associe um único ouvinte de cliques ao contêiner. Ao clicar, leia o dataset do alvo clicado: e.target.closest("[data-id]").dataset.id. Um único ouvinte lida com todos os itens sem o custo de associar um ouvinte a cada item.
dataset versus propriedades personalizadas
Use dataset para dados que precisam ser legíveis a partir do HTML (metadados renderizados pelo servidor e acessíveis aos seletores CSS). Use variáveis JavaScript para o estado temporário em tempo de execução que não precisa estar visível no HTML. Combinar os dois acrescenta complexidade desnecessária.
Cuidado com a coerção de tipos
dataset sempre retorna cadeias de caracteres. el.dataset.active === true é sempre falso — compare com el.dataset.active === "true" ou faça a conversão: el.dataset.active === "true". O estado booleano armazenado em dataset exige uma comparação de cadeias de caracteres.
dataset versus getAttribute
Ambos leem atributos de dados. dataset é mais conveniente para acesso em camelCase; getAttribute exige o nome completo do atributo, incluindo o prefixo "data-". Prefira dataset no código moderno; use getAttribute ao percorrer atributos que não são de dados junto com atributos de dados.
Verificação de conhecimento
Como o atributo HTML data-user-id aparece no objeto dataset do JavaScript?
Resumo
A API dataset mapeia atributos data-* para propriedades JavaScript em camelCase, permitindo ler, escrever e excluir valores com facilidade. Ela possibilita armazenar o estado de componentes, usar padrões de delegação de eventos e passar dados do servidor para o cliente sem campos ocultos nem variáveis globais.
Perguntas Frequentes
A aula “Acessando data-* com dataset em JavaScript” é grátis?
Sim — o texto completo de “Acessando data-* com dataset em JavaScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Acessando data-* com dataset em JavaScript”?
Leia e escreva atributos de dados personalizados por meio da API dataset. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Acessando data-* com dataset em JavaScript”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe data-* e convenções de nomenclatura
- Acessando data-* com dataset em JavaScript
- Usando data-* com seletores de atributos do CSS
- Padrões do mundo real: dicas de ferramentas e acompanhamento de estado