¿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;

 

Artículos relacionados
How to add, edit and delete html fields dynamically using JQuery
How to add, edit and delete html fields dynamically using JQuery

In this post we will see how to add and delete

Introducción al plugin select2 de jQuery
Introducción al plugin select2 de jQuery

Introducci&oacute;n al plugin select2 de jQuer

How to get the latitude and longitude of Draggable pin for Google Maps
How to get the latitude and longitude of Draggable pin for Google Maps

The Google Maps API offers a wide range of fun

2 Comentarios
  • Ender Comentar
    viernes, 7 de febrero de 2020

    Hola como hago para obtener todos los valores de todos los dataset de mi div. Ejemplo, todos los div tiene un data llamado "data-tipo" pero dentro de data-tipo hay diferentes textos, entonces lo que me gustaria hacer es obtener todo lo que contenga cado uno de los div

  • Claudia Klein Comentar
    domingo, 16 de febrero de 2020

    Hola y bienvenidos a Spotcap Global Loan Services, mi nombre es Claudia Klein, soy prestamista y también consultora de préstamos. ¿Necesita urgentemente un refuerzo financiero? ¿necesita un préstamo para varios propósitos? Si su respuesta es sí, le aconsejaré que se ponga en contacto con mi empresa a través de | spotcapglobalservices@gmail.com | o envíenos un mensaje en WhatsApp: +4915758108767 | y tenga un préstamo en su cuenta dentro de las 24 horas porque brindamos excelentes servicios de préstamo en todo el mundo. Ofrecemos todo tipo de servicios de préstamo (préstamo personal, préstamo comercial y muchos más), ofrecemos préstamos a largo y corto plazo y también puede pedir prestado hasta 15 millones de euros. Mi compañía lo ayudará a alcanzar una variedad de objetivos con una amplia gama de productos de préstamos. Sabemos que obtener un préstamo legítimo siempre ha sido un gran problema Para las personas que tienen un problema financiero y que necesitan una solución, a muchas personas les resulta muy difícil obtener préstamos de capital de sus bancos locales u otras instituciones financieras debido al alto interés. tasa, garantía insuficiente, relación deuda / ingresos, bajo puntaje de crédito o cualquier otra razón No más tiempos de espera o visitas a bancos estresantes. Nuestro servicio está disponible las 24 horas, los 7 días de la semana: puede obtener un préstamo y completar sus transacciones cuando y donde lo necesite Brindamos servicios de préstamo de clase mundial las 24 horas. Para consultas / preguntas? - Enviar un correo electrónico a | spotcapglobalservices@gmail.com | o envíenos un mensaje en WhatsApp: +4915758108767 | & Recibir una respuesta en un instante. Su familia, amigos y colegas no necesitan saber que tiene poco efectivo, simplemente escríbanos y recibirá un préstamo. ¡Tu libertad financiera está en tus manos!

Enviame un comentario