Obtener valores de atributos de datos en JavaScript

Los atributos se pueden considerar propiedades de las etiquetas HTML. Los diferentes elementos HTML tienen diferentes atributos, que se especifican dentro de la etiqueta del elemento HTML.

Aprenderemos cómo obtener valores de atributos de datos en JavaScript en este artículo.

La propiedad dataset es una propiedad de solo lectura del elemento HTML que nos ayuda a leer / escribir atributos de datos. Proporciona un mapa de cadenas (DOMStringMap) con la entrada para cada atributo data-*. El nombre del atributo debe comenzar con data-.

Vea el ejemplo a continuación.

• HTML

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

• JavaScript

Para acceder al nombre del atributo, elimine el prefijo data- y convierta dash-style en camelCase.

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

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

Producción :

xyz
18

En el ejemplo anterior, seleccionamos el elemento HTML requerido usando la función querySelector(). Accedemos a los datos de los atributos utilizando la propiedad dataset e imprimimos estos valores accedidos. En el ejemplo anterior mostramos los atributos data-user y data-age.