> 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.

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
150 7 11 8