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

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

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.