ottenere attributi di dati nel codice JavaScript

Ho il prossimo html:

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

È possibile ottenere gli attributi che iniziano con data-e usarli nel codice JavaScript come il codice qui sotto? Per ora ottengo nullcome risultato.

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"
    });
});

Devi accedere alla datasetproprietà :

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"
  });
});

Risultato:

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

Poiché la datasetproprietà non era supportata da Internet Explorer fino alla versione 11, è consigliabile utilizzare getAttribute()invece:

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

Documentazione del set di dati

Documentazione getAttribute

Puoi accedervi come

element.dataset.points

ecc. Quindi in questo caso: this.dataset.points

È inoltre possibile acquisire gli attributi con il metodo getAttribute () che restituirà il valore di un attributo HTML specifico.

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>

se stai prendendo di mira l'attributo di dati nell'elemento HTML,

document.dataset non funzionerà

dovresti usare

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

o

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

I browser moderni accettano HTML e SVG DOMnode.dataset

Utilizzo della proprietà del set di dati del nodo DOM puro di Javascript .

È un vecchio standard Javascript per gli elementi HTML (da Chorme 8 e Firefox 6) ma nuovo per SVG (dall'anno 2017 con Chorme 55.xe Firefox 51) ... Non è un problema per SVG perché al giorno d'oggi (2019) la quota di utilizzo della versione è dominata dai browser moderni.

I valori dei valori-chiave del set di dati sono stringhe pure, ma è buona norma adottare il formato di stringa JSON per tipi di dati non stringa, per analizzarlo JSON.parse().

Utilizzo della proprietà del set di dati in qualsiasi contesto

Snippet di codice per ottenere e impostare set di dati di valori-chiave in contesti HTML e 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>

Intorno al 2019, usando jquery, è possibile accedervi usando $('#DOMId').data('typeId')dov'è $('#DOMId')il selettore jquery per l'elemento span.

Prova questo invece del tuo codice:

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