JavaScript में dataset से data-* का उपयोग
dataset API के माध्यम से कस्टम data एट्रिब्यूट पढ़ें और लिखें
JavaScript में dataset से data-* का उपयोग, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
dataset API क्या है
हर HTML एलीमेंट अपने data-* एट्रिब्यूट को dataset प्रॉपर्टी के ज़रिए उपलब्ध कराता है—यह एक DOMStringMap है, जो getAttribute() कॉल की आवश्यकता के बिना एट्रिब्यूट नामों को मानों से मैप करता है।
एट्रिब्यूट से प्रॉपर्टी का मैपिंग
data-user-id बदलकर el.dataset.userId बन जाता है। एट्रिब्यूट नामों में मौजूद हाइफ़न dataset प्रॉपर्टी में camelCase में बदल जाते हैं। data-item-count को एक्सेस करने के लिए el.dataset.itemCount का उपयोग करें।
मान पढ़ना
किसी data एट्रिब्यूट को पढ़ें: const id = el.dataset.userId। dataset के सभी मान स्ट्रिंग होते हैं — आवश्यकतानुसार संख्यात्मक मानों को Number() या parseInt() से बदलें। अपरिभाषित एट्रिब्यूट null नहीं, बल्कि undefined लौटाते हैं।
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);मान लिखना
dataset के ज़रिए कोई data एट्रिब्यूट सेट करें: el.dataset.state = "active"। इससे data-state HTML एट्रिब्यूट बनता या अपडेट होता है। एट्रिब्यूट में बदलाव DOM में तुरंत दिखाई देता है और MutationObserver द्वारा देखा जा सकता है।
मान हटाना
किसी data एट्रिब्यूट को हटाएँ: delete el.dataset.userId। संबंधित data-user-id एट्रिब्यूट एलीमेंट से हटा दिया जाता है। स्पष्ट रूप से हटाने के लिए आप el.removeAttribute("data-user-id") का भी उपयोग कर सकते हैं।
dataset पर पुनरावृत्ति
dataset एक DOMStringMap है—इस पर for...in लूप से पुनरावृत्ति करें या इसे Object.entries में फैलाएँ: Object.entries(el.dataset).forEach(([key, value]) => { ... })। यह किसी एलीमेंट के सभी data एट्रिब्यूट को एक साथ पढ़ने के लिए उपयोगी है।
कंपोनेंट की स्थिति के लिए dataset का उपयोग
छिपे हुए इनपुट या JavaScript वेरिएबल के बजाय हल्की कंपोनेंट स्थिति को data एट्रिब्यूट में संग्रहीत करें। कोई टैब कंपोनेंट कंटेनर पर data-active-tab में सक्रिय टैब का इंडेक्स संग्रहीत कर सकता है, जिसे कोई भी स्क्रिप्ट साझा वेरिएबल के बिना पढ़ सकती है।
dataset के साथ इवेंट डेलीगेशन
आइटम की सूची में कंटेनर पर केवल एक क्लिक श्रोता लगाएँ। क्लिक होने पर, क्लिक किए गए लक्ष्य का dataset पढ़ें: e.target.closest("[data-id]").dataset.id। प्रत्येक आइटम पर अलग बाइंडिंग के अतिरिक्त खर्च के बिना एक ही श्रोता सभी आइटम संभालता है।
dataset बनाम कस्टम प्रॉपर्टी
ऐसे डेटा के लिए dataset का उपयोग करें जिसे HTML से पढ़ना आवश्यक हो (सर्वर द्वारा रेंडर किया गया मेटाडेटा, CSS सिलेक्टर से सुलभ डेटा)। ऐसे अस्थायी रनटाइम स्टेट के लिए JavaScript वेरिएबल का उपयोग करें जिसे HTML में दिखाई देना आवश्यक न हो। दोनों को मिलाने से अनावश्यक जटिलता बढ़ती है।
टाइप कोअर्शन में सावधानी
dataset हमेशा स्ट्रिंग लौटाता है। el.dataset.active === true हमेशा गलत होता है — el.dataset.active === "true" से तुलना करें या इसे बदलें: el.dataset.active === "true"। dataset में संग्रहीत बूलियन स्थिति के लिए स्ट्रिंग की तुलना आवश्यक है।
dataset बनाम getAttribute
दोनों data एट्रिब्यूट पढ़ते हैं। camelCase एक्सेस के लिए dataset अधिक सुविधाजनक है; getAttribute में "data-" प्रीफ़िक्स सहित पूरा एट्रिब्यूट नाम आवश्यक होता है। आधुनिक कोड में dataset को प्राथमिकता दें; data एट्रिब्यूट के साथ गैर-data एट्रिब्यूट पर पुनरावृत्ति करते समय getAttribute का उपयोग करें।
ज्ञान जाँच
data-user-id HTML एट्रिब्यूट JavaScript dataset ऑब्जेक्ट में किस रूप में दिखाई देता है?
सारांश
dataset API data-* एट्रिब्यूट को आसान तरीके से पढ़ने, लिखने और हटाने के लिए camelCase JavaScript प्रॉपर्टी में मैप करता है। यह छिपे हुए इनपुट या ग्लोबल वेरिएबल के बिना कंपोनेंट स्थिति संग्रहीत करने, इवेंट डेलीगेशन पैटर्न और सर्वर से क्लाइंट तक डेटा भेजने की सुविधा देता है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “JavaScript में dataset से data-* का उपयोग” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “JavaScript में dataset से data-* का उपयोग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“JavaScript में dataset से data-* का उपयोग” में मैं क्या सीखूँगा?
dataset API के माध्यम से कस्टम data एट्रिब्यूट पढ़ें और लिखें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“JavaScript में dataset से data-* का उपयोग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- data-* सिंटैक्स और नामकरण परंपराएँ
- JavaScript में dataset से data-* का उपयोग
- CSS एट्रिब्यूट चयनकर्ताओं के साथ data-* का उपयोग
- वास्तविक दुनिया के पैटर्न: टूलटिप और स्थिति ट्रैकिंग