¿Cómo obtener lo valores de los atributos data con el dataset API de JavaScript?

Los atributos data-* que fueron introducidos en HTML5, nos facilitan la definición de datos personalizados asociados directamente a los elementos DOM de forma estandarizada.

Con JavaScript podemos leer los valores de estos atributos data.*, así como jQuery nos ofrece su método .data(), JavaScript nos ofrece el API Dataset que nos permite obtener y establecer los valores de los atributos data-* de una forma muy sencilla.

Ejemplo HTML data.*

<div id="cardWeb" data-web="Estrada Web Group" data-type="Desarrollo Web, Xamarin, C#, MVC, JavaScript, jQuery" data-nivel ="100%">
    Información de Estrada Web Group
</div>

El atributo en el dataset elimina el prefijo data-, por ejemplo, tomemos los atributos data-* del ejemplo anterior. Esta es su correspondencia en el dataset:

data-web → web

data-type → type

data-nivel → nivel

Y se accederíamos a su valor de la siguiente manera:

// Obtenemos una referencia al elemento DIV
var webcard = document.getElementById("cardWeb ");
// En la propiedad dataset del elemento estarán todos los atributos data-*
var strWeb = webcard.dataset.web; //Resultado: Estrada Web Group
var strType = webcard.dataset.type; //Resultado: Desarrollo Web, Xamarin, C#, MVC, JavaScript, jQuery
var strNivel = webcard.dataset.nivel; //Resultado: 100%

Es decir, el webcard.dataset sería el siguiente objeto:

{
    web: "Estrada Web Group",
    type: "Desarrollo Web, Xamarin, C#, MVC, JavaScript, jQuery",
    nivel: "100%"
}

Para modificar los valores de los atributos data-* es muy simple, por ejemplo, cambiar data-nivel a “full”, es tan fácil como asignarle el nuevo valor:

// Asignamos un nuevo valor al elemento nivel del dataset,
// el cual hacía referencia al atributo data-nivel  
webcard.dataset.nivel  = "full";

Para eliminar un valor podríamos asignarle el valor null o un string vacío, pero si queremos eliminar realmente el atributo data-* hay que utilizar el operador delete.

delete webcard.dataset.nivel;