यह पोस्ट जावास्क्रिप्ट में डेटा विशेषताओं के उपयोग की व्याख्या करेगी।
जावास्क्रिप्ट में डेटा विशेषताओं का उपयोग कैसे करें?
जावास्क्रिप्ट में, ' डेटा विशेषताओं का उपयोग अतिरिक्त जानकारी संग्रहीत करने के लिए किया जाता है जो वेब पेज पर प्रदर्शित नहीं होती है। यह जानकारी उपयोगकर्ता की आवश्यकताओं के अनुसार गतिशील रूप से लिखी, एक्सेस, पढ़ी और बदली जा सकती है। इस अनुभाग ने व्यावहारिक रूप से डेटा विशेषताओं पर चर्चा किए गए कार्य को निष्पादित किया।
वाक्य - विन्यास
< तत्व डेटा -*= 'कुछ मूल्य' >
उपरोक्त वाक्यविन्यास में:
- “ तत्व ” HTML तत्व का प्रतिनिधित्व करता है जिसमें डेटा विशेषता का उपयोग किया जाता है।
- “ डेटा-* 'उपसर्ग (डेटा-) से शुरू होने वाले एकाधिक (*) डेटा विशेषताओं को दर्शाता है यानी एक हाइफ़न के बाद डेटा कीवर्ड।
- कुछ मूल्य: यह डेटा विशेषता का मान निर्दिष्ट करता है।
अब, डेटा विशेषता बनाने के लिए उपरोक्त सिंटैक्स का उपयोग करें।
डेटा विशेषताएँ बनाएँ
< डिव आईडी = 'मायडिव' डेटा - नाम = 'एल्विन' डेटा - आयु = '40' डेटा - लिंग = 'पुरुष' > डिव >बताया गया एक-पंक्ति HTML कोड निम्नलिखित बनाता है ' डेटा-नाम ”,“ डेटा-आयु ', और यह ' डेटा-लिंग 'Div' तत्व के अंदर विशेषताएँ जिनकी आईडी 'myDiv' है।
आइए निर्मित डेटा विशेषताओं को पढ़ें/एक्सेस करें।
उदाहरण 1: 'डेटासेट' संपत्ति का उपयोग करके डेटा विशेषता को पढ़ें/एक्सेस करें
यह उदाहरण विशिष्ट या सभी डेटा विशेषताओं को पढ़ने/पहुँचने के लिए 'डेटासेट' गुण लागू करता है।
सबसे पहले, देखें ' बटन 'तत्व जो' को कॉल करता है jsFunc() 'जब यह संबद्ध है' क्लिक पर 'बटन क्लिक करने पर ईवेंट चालू हो जाता है:
< बटन पर क्लिक करें = 'jsFunc()' > डेटा विशेषता तक पहुंचें बटन >अब, 'jsFunc()' परिभाषा की ओर आगे बढ़ें:
< लिखी हुई कहानी >फ़ंक्शन jsFunc ( ) {
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'मायडिव' ) ;
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। डाटासेट ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड पंक्तियों में:
- “ jsFunc() 'पहले एक वेरिएबल 'elem' घोषित करता है जो 'लागू होता है' दस्तावेज़.getElementById() 'अपनी आईडी 'myDiv' के माध्यम से जोड़े गए div तत्व तक पहुंचने की विधि।
- इसके बाद, यह 'का उपयोग करता है कंसोल.लॉग() 'विधि जो' का उपयोग करेगी डाटासेट एक्सेस किए गए div तत्व की डेटा विशेषताओं तक पहुंचने और उन्हें वेब कंसोल में प्रदर्शित करने के लिए '' संपत्ति।
उत्पादन
वेब कंसोल खोलने के लिए F12 दबाएँ:
यह देखा जा सकता है कि दिए गए बटन पर क्लिक करने पर कंसोल ' दिखाता है DOMStringMap '' div तत्व की सभी डेटा विशेषताएँ शामिल हैं।
विशिष्ट मूल्य तक पहुंचें
यदि उपयोगकर्ता विशिष्ट डेटा विशेषता तक पहुंचना चाहता है तो उसका नाम 'डेटासेट' संपत्ति के साथ इस प्रकार निर्दिष्ट करें:
< लिखी हुई कहानी >फ़ंक्शन प्राप्त करें ( ) {
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'मायडिव' ) ;
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। डाटासेट . नाम ) ;
}
लिखी हुई कहानी >
इस समय, 'नाम' डेटा विशेषताओं को 'का उपयोग करके एक्सेस किया जाता है' डाटासेट ' संपत्ति।
उत्पादन
यह देखा जा सकता है कि बटन क्लिक करने पर कंसोल केवल निर्दिष्ट डेटा विशेषताओं का मान दिखा रहा है।
उदाहरण 2: 'getAttribute()' विधि का उपयोग करके डेटा विशेषता को पढ़ें/एक्सेस करें
यह उदाहरण डेटा विशेषताओं को पढ़ने/पहुँचने के लिए 'getAttribute()' विधि का उपयोग करता है।
इस परिदृश्य में, पहले उदाहरण का बटन तत्व भी शामिल है:
< बटन पर क्लिक करें = 'jsFunc()' > डेटा विशेषता तक पहुंचें बटन >आइए 'getAttribute()' विधि की कार्यक्षमता देखें:
< लिखी हुई कहानी >फ़ंक्शन jsFunc ( ) {
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'मायडिव' ) ;
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। विशेषता प्राप्त करें ( 'डेटा-नाम' ) ) ;
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। विशेषता प्राप्त करें ( 'डेटा-आयु' ) ) ;
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। विशेषता प्राप्त करें ( 'डेटा-लिंग' ) ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में:
- 'एलेम' चर 'लागू होता है' दस्तावेज़.getElementById() इसकी आईडी 'myDiv' का उपयोग करके जोड़े गए div तत्व तक पहुंचने की विधि।
- अगला, ' कंसोल.लॉग() 'विधि' का उपयोग करती है getAttribute() प्राप्त किए गए div तत्व का निर्दिष्ट 'डेटा' विशेषता मान प्राप्त करने और फिर इसे वेब कंसोल में प्रदर्शित करने की विधि।
- शेष निर्दिष्ट डेटा विशेषताओं तक पहुँचने के लिए समान कार्य किया जाता है।
टिप्पणी: 'getAttribute()' विधि डेटा विशेषता को उपसर्ग 'डेटा' के साथ निर्दिष्ट करती है जिसके बाद एक हाइफ़न (-) यानी (डेटा-) होता है जिसकी 'डेटासेट()' संपत्ति का उपयोग करते समय आवश्यकता नहीं होती है।
उत्पादन
उपरोक्त आउटपुट बटन क्लिक पर सभी निर्दिष्ट डेटा विशेषता मान प्रदर्शित करता है।
उदाहरण 3: 'डेटासेट' संपत्ति का उपयोग करके एक डेटा विशेषता लिखें
यह उदाहरण 'डेटासेट' संपत्ति का उपयोग करके डेटा विशेषताएँ लिखता है।
बटन तत्व की सामग्री वर्तमान परिदृश्य के अनुसार बदल दी गई है:
< बटन पर क्लिक करें = 'jsFunc()' > डेटा विशेषता लिखें बटन >अब, जोड़े गए div तत्व में नई डेटा विशेषता लिखें:
< लिखी हुई कहानी >फ़ंक्शन jsFunc ( ) {
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'मायडिव' ) ;
तत्व। डाटासेट . पहचान = 'व्यक्ति'
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। डाटासेट ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड ब्लॉक में:
- “ डाटासेट '' संपत्ति एक निर्दिष्ट स्ट्रिंग मान के साथ एक नया डेटा विशेषता नाम 'आईडी' लिखती है।
- अगला, ' conolse.log() वेब कंसोल में नव लिखित डेटा विशेषता वाले 'DOMStringMap' इंटरफ़ेस को प्रदर्शित करने के लिए 'डेटासेट' प्रॉपर्टी का उपयोग करता है।
उत्पादन
यहां, कंसोल 'DOMStringMap' प्रदर्शित करता है जिसमें 'डेटासेट' प्रॉपर्टी का उपयोग करके लिखी गई नई डेटा विशेषता 'आईडी' शामिल है।
उदाहरण 4: डेटा विशेषता मान अद्यतन करें
यह उदाहरण 'डेटासेट' प्रॉपर्टी की मदद से किसी विशिष्ट डेटा विशेषता के मौजूदा मान को अपडेट करता है।
दिए गए परिदृश्य के अनुसार बटन तत्व का टेक्स्ट बदल दिया गया है:
< बटन पर क्लिक करें = 'jsFunc()' > डेटा विशेषता अद्यतन करें बटन >अब, जावास्क्रिप्ट अनुभाग पर आगे बढ़ें:
< लिखी हुई कहानी >फ़ंक्शन jsFunc ( ) {
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'मायडिव' ) ;
तत्व। डाटासेट . नाम = 'जॉन'
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। डाटासेट . नाम ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड ब्लॉक में, निर्दिष्ट 'नाम' डेटा विशेषता मान को 'की मदद से अपडेट किया गया है' डाटासेट ' संपत्ति।
उत्पादन
बटन क्लिक करने पर कंसोल निर्दिष्ट डेटा विशेषताओं का अद्यतन मान दिखाता है।
उदाहरण 5: डेटा विशेषता हटाएँ
यह उदाहरण 'डिलीट' कीवर्ड का उपयोग करके विशिष्ट डेटा विशेषता को हटा देता है।
बटन तत्व का टेक्स्ट आवश्यकता के अनुसार बदला जाता है:
< बटन पर क्लिक करें = 'jsFunc()' > डेटा विशेषता हटाएँ बटन >अब, जावास्क्रिप्ट कोड ब्लॉक का पालन करें:
< लिखी हुई कहानी >फ़ंक्शन jsFunc ( ) {
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'मायडिव' ) ;
तत्व हटाएं. डाटासेट . आयु ;
सांत्वना देना। लकड़ी का लट्ठा ( तत्व। डाटासेट . आयु ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट ' निर्दिष्ट करता है मिटाना एक्सेस किए गए डेटा विशेषता को हटाने के लिए 'डेटासेट' संपत्ति के साथ कीवर्ड।
उत्पादन
यह देखा गया है कि कंसोल दिखाता है ' अपरिभाषित 'एक बटन पर क्लिक करें जो स्पष्ट रूप से सत्यापित करता है कि एक्सेस किया गया डेटा विशेषता हटा दिया गया है।
निष्कर्ष
जावास्क्रिप्ट में, डेटा विशेषताओं का उपयोग विभिन्न तरीकों से किया जा सकता है जैसे कि पढ़ना, एक्सेस करना, लिखना, अपडेट करना और आवश्यकताओं के अनुसार उन्हें हटाना। इन सभी कार्यों को बिल्ट-इन की मदद से किया जा सकता है डाटासेट ' संपत्ति। हालाँकि, उपयोगकर्ता 'की मदद से डेटा विशेषता को एक-एक करके भी एक्सेस कर सकता है' getAttribute() ' तरीका। इस पोस्ट में जावास्क्रिप्ट में डेटा विशेषताओं के उपयोग को व्यावहारिक रूप से समझाया गया है।