obtener atributos de datos en código JavaScript

Tengo el siguiente html:

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

¿Es posible obtener los atributos que comienzan data-y usarlos en el código JavaScript como el código a continuación? Por ahora me sale nullcomo resultado.

document.getElementById("the-span").addEventListener("click", function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});

Necesita acceder a la datasetpropiedad :

document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});

Resultado:

// json would equal:
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Debido a que la datasetpropiedad no era compatible con Internet Explorer hasta la versión 11, puede utilizar getAttribute()en su lugar:

document.getElementById("the-span").addEventListener("click", function(){
  console.log(this.getAttribute('data-type'));
});

Documentación del conjunto de datos

documentación de getAttribute

Puedes acceder a él como

element.dataset.points

etc. Entonces en este caso: this.dataset.points

También puede obtener los atributos con el método getAttribute () que devolverá el valor de un atributo HTML específico.

var elem = document.getElementById('the-span');

var typeId = elem.getAttribute('data-typeId');
var type   = elem.getAttribute('data-type');
var points = elem.getAttribute('data-points');
var important = elem.getAttribute('data-important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

si está apuntando al atributo de datos en el elemento Html,

document.dataset no trabajará

Deberías usar

document.querySelector("html").dataset.pbUserId

o

document.getElementsByTagName("html")[0].dataset.pbUserId

Los navegadores modernos aceptan HTML y SVG DOMnode.dataset

Uso de la propiedad de conjunto de datos de nodo DOM de Javascript puro .

Es un antiguo estándar Javascript para elementos HTML (desde Chorme 8 y Firefox 6) pero nuevo para SVG (desde el año 2017 con Chorme 55.xy Firefox 51) ... No es un problema para SVG porque en la actualidad (2019) El uso compartido de la versión está dominado por los navegadores modernos.

Los valores de los valores-clave del conjunto de datos son cadenas puras, pero una buena práctica es adoptar el formato de cadena JSON para tipos de datos que no sean cadenas, para analizarlo JSON.parse().

Usar la propiedad del conjunto de datos en cualquier contexto

Fragmento de código para obtener y establecer conjuntos de datos de valores clave en contextos HTML y SVG.

console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )

<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
  <g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>

Alrededor de 2019, usando jquery, se puede acceder a esto usando $('#DOMId').data('typeId')donde $('#DOMId')está el selector de jquery para su elemento span.

Pruebe esto en lugar de su código:

var type=$("#the-span").attr("data-type");
alert(type);