जावास्क्रिप्ट कोड में डेटा विशेषताएँ प्राप्त करें

144

मेरे पास अगला HTML है:

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

क्या उन विशेषताओं को प्राप्त करना संभव है जो इसकी शुरुआत करते हैं data-, और इसे नीचे दिए गए कोड की तरह जावास्क्रिप्ट कोड में उपयोग करते हैं? अभी के लिए मैं 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"
    });
});

javascript html custom-data-attribute

— एच। पौवलीन
स्रोत

आजकल (2019) में एसवीजी नोड्स (!) के साथ नोड की डेटासेट संपत्ति का उपयोग करना संभव है, नीचे उत्तर देखें या डी 3 का उपयोग करें ।

— पीटर क्रस

173

आपको datasetसंपत्ति तक पहुंचने की आवश्यकता है :

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

परिणाम:

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

— जोश क्रोज़ियर
स्रोत

2

याद रखिए MDN के अनुसार डेटासेट मानक इंटरनेट एक्सप्लोरर <11 के लिए काम नहीं करेगा कि developer.mozilla.org/en-US/docs/Learn/HTML/Howto/... "आईई 10 का समर्थन करने के लिए और के तहत आप का उपयोग करने की आवश्यकता है getAttribute () के बजाय डेटा विशेषताएँ। "

— जोनाटन

101

क्योंकि datasetसंस्करण 11 तक इंटरनेट एक्सप्लोरर द्वारा संपत्ति का समर्थन नहीं किया गया था, आप getAttribute()इसके बजाय उपयोग करना चाह सकते हैं :

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

डेटासेट प्रलेखन

getAttribute प्रलेखन

— MarkPlewis
स्रोत

27

आप इसे एक्सेस कर सकते हैं

element.dataset.points

आदि तो इस मामले में: this.dataset.points

— meskobalazs
स्रोत

7

आप getAttribute () पद्धति से उन विशेषताओं को भी पकड़ सकते हैं जो एक विशिष्ट HTML विशेषता का मान लौटाएंगी।

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>

स्निपेट का विस्तार करें

— ii iml0sto1
स्रोत

4

यदि आप Html तत्व में डेटा विशेषता को लक्षित कर रहे हैं,

document.dataset काम नहीं करेगा

आपको उपयोग करना चाहिए

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

या

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

— बशीर अल-मोमानी
स्रोत

1

आधुनिक ब्राउज़र HTML और SVG DOMnode.dataset स्वीकार करते हैं

शुद्ध जावास्क्रिप्ट का डोम-नोड डेटासेट संपत्ति का उपयोग करना ।

यह HTML तत्वों के लिए एक पुराना जावास्क्रिप्ट मानक है (चर्मे 8 और फ़ायरफ़ॉक्स 6 के बाद से) लेकिन एसवीजी के लिए नया (चर्मे 55.x और फ़ायरफ़ॉक्स 51 के साथ वर्ष 2017 से) ... यह एसवीजी के लिए कोई समस्या नहीं है क्योंकि आजकल (2019) संस्करण के उपयोग में हिस्सा आधुनिक ब्राउज़रों का वर्चस्व है।

डेटासेट के की-वैल्यूज़ प्योर स्ट्रिंग्स हैं, लेकिन इसके द्वारा पार्स करने के लिए नॉन-स्ट्रिंग डेटाटिप्स के लिए JSON स्ट्रिंग फॉर्मेट अपनाना एक अच्छा अभ्यास हैJSON.parse() ।

किसी भी संदर्भ में डेटासेट संपत्ति का उपयोग करना

HTML और 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>

स्निपेट का विस्तार करें

— पीटर क्रस
स्रोत

0

सर्का 2019, jquery का उपयोग करते हुए, यह आपके स्पैन तत्व के लिए jquery चयनकर्ता $('#DOMId').data('typeId')कहाँ $('#DOMId')है, का उपयोग करके पहुँचा जा सकता है ।

— den232
स्रोत

-11

अपने कोड के बजाय इसे आज़माएं:

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

— आकाश अग्रवाल
स्रोत

15

आस्कर ने jQuery का उल्लेख नहीं किया, यह इस purporse के लिए भी अच्छा jQuery नहीं है। के .data('type');बजाय होना चाहिए ।

— कॉलिन डेक्ले

2

और इसके शीर्ष पर "आपके कोड के बजाय" का उपयोग करने का सुझाव बहुत व्यापक है; प्रश्नकर्ता घटना से निपटने के सेट-अप, और रखने के लिए चाहते हो जाएगा JSONपरिणाम है, न कि alert की data-typeविशेषता।

— त्रिकोट

1

यह jquery है, शुद्ध जावास्क्रिप्ट नहीं।

— user3130012