> Faqs > Cómo acceder a los "data attributes" mediante Javascript sin jQuery

Cómo acceder a los "data attributes" mediante Javascript sin jQuery

Quiero acceder a los data-attributes de un elemento, usando Javascript nativo (Vanilla JS) sin usar librerías como jQuery o similares.

Me refiero a los datos que se colocan en los atributos data-*. Por ejemplo:

<span data-ciudad="Lugo">Ronda da Muralla</span>

Querría acceder al valor "Lugo" que hay en la etiqueta span anterior.

Tego inconvenientes al cargar mi pagina por alguna razon los scrip no cargan como deberian y algunos ni cargan, por donde debo empezar a revisar? Por la consola de desarrollo. Viendo los errores de Javascript o los errores de página no encontrada que te devuelve el servidor. De todos modos, crea una faq nueva, porque esta es para hablar de los data-attributes.
Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Lo encontré. Hay un atributo llamado "dataset", a partir del cual existen una serie de propiedades, que genera el motor de Javascript automáticamente, una para cada data-attribute.

Por ejemplo, en mi caso anterior, para acceder al atriburo data-ciudad, tendría que usar el siguiente código:

miSpan.dataset.ciudad

Suponiendo que en el objeto "miSpan" tengo una referencia al span que tiene el atributo data que quiero acceder.

Preguntando en Caniuse, por el soporte del atributo "dataset" para acceso a los data-attributes, veo que está disponible en absolutamente todos los navegadores, incluido Internet Explorer. Soporte total en IE11. En versiones anteriores de Explorer 11 tienes que acceder a través de getAttribute('data-ciudad').

De hecho, ese mecanismo funciona también.

miSpan.getAttribute('data-ciudad')

Eso te devuelve el valor que tengas en el atributo data-ciudad. Sería otra manera de acceder a los data attributes con Javascript, aunque no tan elegante como acceder a través de la propiedad "dataset".

Alberto
335 10 21 10

La respuesta de Alberto es perfecta. Así puedes acceder a los data-attributes de una manera sencilla.

Voy a complementarla con un ejemplo de tratamiento de eventos:

Acceder a los data attributes de un elemento sobre el que se define un manejador de eventos:

Tenemos estos elementos en la página:

<ul>
    <li class="plan" data-plan="mensual">Mensual</li>
    <li class="plan" data-plan="trimestral">Trimestral</li>
    <li class="plan" data-plan="anual">Anual</li>
<ul>

Ahora defino un manejador de eventos para todos los LI de la clase "plan".

document.querySelectorAll('li.plan').forEach( elem => {
  elem.addEventListener('click', e => {
    console.log(e.target.dataset.plan);
  });
});

Dentro del manejador de eventos puedo acceder a e.target.dataset.plan y recuperar el valor data-attribute "data-plan" del LI sobre el que se ha hecho clic.

Miguel Angel
1651 76 102 5