Obtenha valores de atributos de dados em JavaScript

Os atributos podem ser considerados propriedades de tags HTML. Elementos HTML diferentes têm atributos diferentes, que são especificados na tag do elemento HTML.

Aprenderemos como obter valores de atributos de dados em JavaScript neste artigo.

A propriedade dataset é uma propriedade somente leitura do elemento HTML que nos ajuda a ler / gravar atributos de dados. Ele fornece um mapa de string (DOMStringMap) com a entrada para cada atributo data-*. O nome do atributo deve começar com data-.

Veja o exemplo abaixo.

• HTML

<div id="user" data-id="1" data-user="xyz" data-age="18">User 1</div>

• JavaScript

Para acessar o nome do atributo, remova o prefixo data- e converta dash-style em camelCase.

const person = document.querySelector('#user');
// person.dataset.id = 1
// person.dataset.user = "xyz"

console.log(person.dataset.user);
console.log(person.dataset.age);

Produção:

xyz
18

No exemplo acima, selecionamos o elemento HTML necessário usando a função querySelector(). Acessamos os dados dos atributos usando a propriedade dataset e imprimimos esses valores acessados. Exibimos os atributos data-user e data-age no exemplo acima.