JavaScript kodunda veri özelliklerini alma

Sonraki html var:

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

İle başlayan özellikleri almak ve aşağıdaki kod gibi JavaScript kodunda data-kullanmak mümkün mü? Şimdilik sonuç alıyorum .null

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

Sen erişmesi gereken datasetözellik :

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

Sonuç:

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

Çünkü datasetmülkiyet sürümü 11 kadar Internet Explorer tarafından desteklenen değildi, kullanmak isteyebilirsiniz getAttribute()yerine:

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

Veri kümesi belgeleri

getAttribute belgeleri

Buna şu şekilde erişebilirsiniz:

element.dataset.points

Bu durumda: this.dataset.points

Öznitelikleri, belirli bir HTML özniteliğinin değerini döndürecek getAttribute () yöntemiyle de yakalayabilirsiniz .

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>

Html öğesinde veri özelliğini hedefliyorsanız,

document.dataset çalışmayacak

kullanmalısın

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

veya

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

Modern tarayıcılar HTML ve SVG DOMnode.dataset'i kabul eder

Kullanılması saf JavaScript'ın DOM-düğüm veri kümesi özelliğini .

Bu bir olan HTML öğeleri için eski JavaScript standart (chorme 8 ve Firefox 6 beri) ama SVG için yeni (Chorme 55.x ve Firefox 51 ile 2017 yılında beri) ... Bu SVG için bir sorun değildir, çünkü (2019) günümüzde de sürümün kullanım payına modern tarayıcılar hakimdir.

Veri kümesinin anahtar / değer çiftlerinin değerleri saf dizelerdir, ancak dize olmayan veri türleri için JSON dizesi biçimini benimsemek ve ayrıştırmak iyi bir uygulamadırJSON.parse() .

Kullanılması veri kümesi herhangi bir bağlamda mülkiyet

HTML ve SVG bağlamlarında anahtar / değer veri kümelerini almak ve ayarlamak için kod snippet'i .

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>

2019 dolaylarında, jquery kullanılarak , span öğeniz için jquery seçici $('#DOMId').data('typeId')nerede kullanılarak erişilebilir $('#DOMId').

Kodunuz yerine şunu deneyin:

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