डोम' टोकन सूची 'इसमें बहुत सारे गुण या विधियां शामिल हैं जिन्हें अंतिम उपयोगकर्ता द्वारा उनकी आवश्यकताओं के अनुसार एक्सेस किया जा सकता है। इस सूची द्वारा प्रदान की गई संपत्तियां और विधियां प्रदान किए गए डेटा सेट पर विशिष्ट संचालन करती हैं और तदनुसार परिणाम लौटाती हैं। यह एक सरणी की तरह अधिक है क्योंकि इसमें विभिन्न सदस्य हैं जिन्हें उनके सूचकांक द्वारा चुना जा सकता है और एक सरणी की तरह ही पहला सूचकांक है ' 0 ”। लेकिन आप 'जैसे तरीकों का उपयोग नहीं कर सकते पॉप (), “पुश ()” या “जॉइन () ”।
यह ब्लॉग जावास्क्रिप्ट द्वारा HTML DOMTokenList ऑब्जेक्ट की कार्यप्रणाली को समझाएगा।
जावास्क्रिप्ट HTML DOMTokenList ऑब्जेक्ट के साथ कैसे काम करें?
HTML DOMTokenList अपने आप में कुछ भी नहीं है और इसका मूल्य केवल इसमें मौजूद गुणों और विधियों के कारण है। आइए उचित कार्यान्वयन के साथ इन गुणों और विधियों पर विस्तार से जाएँ।
विधि 1: जोड़ें() विधि
“ जोड़ना ()' चयनित तत्व के साथ नए वर्ग, गुण, या सरल टोकन संलग्न या निर्दिष्ट करता है। इसका सिंटैक्स नीचे बताया गया है:
htmlतत्व. जोड़ना ( oneOrMoreToken )
इसका कार्यान्वयन निम्नलिखित कोड के माध्यम से किया जाता है:
< सिर >
< शैली >
।फ़ॉन्ट आकार{
फ़ॉन्ट-आकार: बड़ा;
}
।रंग{
पृष्ठभूमि-रंग: कैडेटब्लू;
रंग: व्हाइटस्मोक;
}
< / शैली >
< / सिर >
< शरीर >
< एच 1 शैली = 'रंग: कैडेटब्लू;' > लिनक्स < / एच 1 >
< बटन क्लिक पर = 'कार्रवाई()' > एडर < / बटन >
< पी > स्टाइलिंग लागू करने के लिए उपरोक्त बटन दबाएँ < / पी >
< डिव पहचान = 'चयनित' >
< पी > मैं चयनित पाठ हूँ. < / पी >
< / डिव >
< लिखी हुई कहानी >
फ़ंक्शन क्रिया() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / लिखी हुई कहानी >
< / शरीर >
उपरोक्त कोड की व्याख्या इस प्रकार है:
- सबसे पहले, दो सीएसएस कक्षाएं चुनें” फ़ॉन्ट आकार ' और 'रंग' और उन्हें ' जैसे यादृच्छिक सीएसएस गुण निर्दिष्ट करें फ़ॉन्ट-आकार”, “पृष्ठभूमि-रंग” और “रंग ”।
- इसके बाद, '<' का उपयोग करके बटन बनाएं बटन >' टैग जो ' का आह्वान करता है कार्रवाई ()' फ़ंक्शन का उपयोग करके ' क्लिक पर घटना श्रोता.
- इसके अलावा, एक अभिभावक बनाएं ” डिव 'तत्व और इसे' की एक आईडी निर्दिष्ट करें चयनित ” और इसके अंदर डमी डेटा डालें।
- उसके बाद, परिभाषित करें ' कार्रवाई ()'' फ़ंक्शन और चयनित तत्व के संदर्भ को उसकी विशिष्ट आईडी तक पहुंच कर संग्रहीत करता है।
- अंत में, 'का उपयोग करें क्लासलिस्ट 'वर्गों को निर्दिष्ट करने और संलग्न करने के लिए संपत्ति' जोड़ना ()' तरीका। फिर, इस विधि कोष्ठक के अंदर सीएसएस कक्षाओं को पास करें और यह इन कक्षाओं को चयनित तत्व पर लागू करेगा।
उपरोक्त कोड के संकलन के बाद आउटपुट इस प्रकार उत्पन्न होता है:
उपरोक्त gif पुष्टि करता है कि CSS कक्षाएं 'के माध्यम से एक चयनित तत्व को सौंपी गई हैं' जोड़ना ()' तरीका।
विधि 2: निकालें() विधि
यह विधि एक या अधिक चयनित तत्वों से विशिष्ट वर्ग या आईडी को हटा देती है जैसा कि नीचे दिए गए कोड में किया गया है:
< सिर >< शैली >
।फ़ॉन्ट आकार {
फ़ॉन्ट- आकार : बड़ा;
}
. रंग {
पृष्ठभूमि- रंग : कैडेटब्लू;
रंग : सफेद धुआं;
}
< / शैली >
< / सिर >
< शरीर >
< एच 1 शैली = 'रंग: कैडेटब्लू;' > लिनक्सहिंट < / एच 1 >
< बटन क्लिक पर = 'कार्रवाई()' >योजक< / बटन >
< पी >स्टाइलिंग लागू करने के लिए उपरोक्त बटन दबाएं< / पी >
< डिव पहचान = 'चयनित' कक्षा = 'फ़ॉन्टआकार का रंग' >
< पी >मैं हूं चयनित मूलपाठ .< / पी >
< / डिव >
< लिखी हुई कहानी >
समारोह कार्रवाई ( ) {
document.getElementById ( 'चयनित' ) .classList.निकालें ( 'रंग' ) ;
}
< / लिखी हुई कहानी >
< / शरीर >
उपरोक्त कोड का विवरण इस प्रकार है:
- प्रारंभ में, उपरोक्त कोड में समझाए गए कोड को यहां एक उदाहरण के रूप में उपयोग किया गया है।
- यहाँ, दोनों ' रंग ' और ' फ़ॉन्ट आकार कक्षाएं सीधे चयनित तत्व को सौंपी जाती हैं।
- उसके बाद, 'के अंदर कार्रवाई ()' फ़ंक्शन जिसे 'द्वारा लागू किया जाता है क्लिक पर 'घटना श्रोता' निकालना ()' टोकन विधि का उपयोग किया जाता है।
- यह विधि एक या एकाधिक कक्षाएं लेती है जिन्हें चयनित तत्व से हटा दिया जाएगा। हमारे मामले में, ' रंग 'चयनित HTML तत्व से क्लास को हटाया जा रहा है।
उपरोक्त कोड का आउटपुट इस प्रकार प्रदर्शित होता है:
उपरोक्त आउटपुट दिखाता है कि विशिष्ट सीएसएस वर्ग को 'निकालें ()' विधि का उपयोग करके चयनित तत्व से हटा दिया गया है।
विधि 3: टॉगल() विधि
“ टॉगल ()' विधि दोनों का संयोजन है' जोड़ना ()' और ' निकालना ()'' तरीके। यह पहले चयनित HTML तत्व को प्रदान की गई CSS क्लास निर्दिष्ट करता है और फिर उपयोगकर्ता के कार्यों के अनुसार इसे हटा देता है।
< एचटीएमएल >< सिर >
< शैली >
।फ़ॉन्ट आकार {
फ़ॉन्ट- आकार : xx-बड़ा;
}
. रंग {
पृष्ठभूमि- रंग : कैडेटब्लू;
रंग : सफेद धुआं;
}
< / शैली >
< / सिर >
< शरीर >
< एच 1 शैली = 'रंग: कैडेटब्लू;' > लिनक्सहिंट < / एच 1 >
< बटन क्लिक पर = 'कार्रवाई()' >योजक< / बटन >
< पी >स्टाइलिंग लागू करने के लिए उपरोक्त बटन दबाएं< / पी >
< डिव पहचान = 'चयनित' >
< पी >मैं हूं चयनित मूलपाठ .< / पी >
< / डिव >
< लिखी हुई कहानी >
समारोह कार्रवाई ( ) {
document.getElementById ( 'चयनित' ) .क्लासलिस्ट.टॉगल ( 'फ़ॉन्ट आकार' ) ;
}
< / लिखी हुई कहानी >
< / शरीर >
< / एचटीएमएल >
उपरोक्त कोड का विवरण नीचे दिया गया है:
- वही प्रोग्राम उपयोग किया जाता है जो उपरोक्त अनुभाग में उपयोग किया गया है, केवल ' टॉगल ()' विधि को 'से बदल दिया गया है निकालना ()' तरीका।
संकलन चरण के अंत में, आउटपुट इस प्रकार होगा:
आउटपुट दिखाता है कि उपयोगकर्ता की कार्रवाई के अनुसार विशिष्ट सीएसएस वर्ग को जोड़ा और हटाया जा रहा है।
विधि 4: सम्मिलित() विधि
“ रोकना ()' विधि का उपयोग HTML तत्व पर विशिष्ट सीएसएस कक्षाओं की उपलब्धता की जांच करने के लिए किया जाता है और इसका कार्यान्वयन नीचे बताया गया है:
< लिखी हुई कहानी >समारोह कार्रवाई ( ) {
चलो एक्स = दस्तावेज़। getElementById ( 'चयनित' ) . क्लासलिस्ट . रोकना ( 'फ़ॉन्ट आकार' ) ;
दस्तावेज़। getElementById ( 'परीक्षा' ) . आंतरिक HTML = एक्स ;
}
लिखी हुई कहानी >
HTML और CSS भाग वही रहता है। केवल “< लिखी हुई कहानी >' टैग, 'contains()' विधि को चयनित तत्व पर यह जांचने के लिए लागू किया जाता है कि क्या ' फ़ॉन्ट आकार ” उस तत्व पर लागू होता है या नहीं। फिर, परिणाम वेबपेज पर एक आईडी वाले HTML तत्व पर प्रदर्शित होता है परीक्षा ”।
उपरोक्त कोड के संकलन के बाद, वेबपेज इस तरह दिखाई देता है:
आउटपुट से पता चलता है कि ' का मान सत्य ” लौटाया गया है जिसका अर्थ है कि विशिष्ट सीएसएस वर्ग चयनित HTML तत्व पर लागू किया गया है।
विधि 5: आइटम() विधि
“ वस्तु ()' विधि टोकन या सीएसएस वर्ग को उनके सूचकांक संख्या के अनुसार चुनती है, जो 'से शुरू होता है 0 ', जैसा कि नीचे दिया गया है:
< शरीर >< h1 शैली = 'रंग: कैडेटब्लू;' > लिनक्स एच 1 >
< बटन पर क्लिक करें = 'कार्रवाई()' > परीक्षक बटन >
< पी > सीएसएस कक्षा जिसे सबसे पहले सौंपा गया है , पुनर्प्राप्त हो जाता है : पी >
< h3 आईडी = 'उदाहरण' कक्षा = 'फर्स्टसीएलएस सेकेंडसीएलएस थर्डसीएलएस' > h3 >
< लिखी हुई कहानी >
समारोह कार्रवाई ( ) {
चलो डेमोलिस्ट = दस्तावेज़। getElementById ( 'उदाहरण' ) . क्लासलिस्ट . वस्तु ( 0 ) ;
दस्तावेज़। getElementById ( 'उदाहरण' ) . आंतरिक HTML = डेमोलिस्ट ;
}
लिखी हुई कहानी >
शरीर >
उपरोक्त कोड की व्याख्या:
- सबसे पहले, कई सीएसएस कक्षाएं हमारे चयनित तत्व को 'आईडी' के साथ सौंपी जाती हैं उदाहरण ' और 'एक्शन ()' विधि जो 'के माध्यम से लागू होती है क्लिक पर ' आयोजन।
- इस समारोह में, ' वस्तु ()'' के सूचकांक के साथ विधि 0 'चयनित तत्व से जुड़ जाता है। परिणाम वेरिएबल में संग्रहीत हो जाता है ' डेमोलिस्ट ' जिसे फिर ' का उपयोग करके वेबपेज पर मुद्रित किया जाता है आंतरिक HTML ' संपत्ति।
संकलन समाप्त होने के बाद, आउटपुट इस प्रकार आता है:
आउटपुट सीएसएस क्लास का नाम दिखाता है जो सबसे पहले चयनित तत्व पर लागू होता है और पुनर्प्राप्त हो जाता है।
विधि 6: लंबाई संपत्ति
“ लंबाई 'टोकनलिस्ट की संपत्ति उन तत्वों या निर्दिष्ट वर्गों की संख्या लौटाती है जो चयनित तत्व पर लागू होते हैं। कार्यान्वयन प्रक्रिया नीचे बताई गई है:
< लिखी हुई कहानी >समारोह कार्रवाई ( ) {
उन्हें ध्वस्त करने दीजिए = दस्तावेज़। getElementById ( 'उदाहरण' ) . क्लासलिस्ट . लंबाई ;
दस्तावेज़। getElementById ( 'उदाहरण' ) . आंतरिक HTML = ध्वस्त ;
}
लिखी हुई कहानी >
उपरोक्त कोड ब्लॉक में:
- पहले ' लंबाई 'संपत्ति' से जुड़ी है क्लासलिस्ट चयनित तत्व पर निर्दिष्ट वर्गों की संख्या पुनः प्राप्त करने के लिए संपत्ति।
- इसके बाद, संपत्ति का परिणाम वेरिएबल में संग्रहीत हो जाता है ' ध्वस्त ' जिसे वेबपेज पर ' की आईडी वाले तत्व पर प्रदर्शित किया जाएगा उदाहरण ”।
- शेष कोड उपरोक्त अनुभाग के समान ही रहता है।
संकलन के बाद उत्पन्न आउटपुट नीचे बताया गया है:
आउटपुट तत्व पर लागू कक्षाओं को लौटाता है।
विधि 7: बदलें() विधि
“ प्रतिस्थापित करें ()' विधि वह है जो कम से कम दो पैरामीटर लेती है और चयनित तत्व के लिए पहले पैरामीटर को दूसरे पैरामीटर से बदल देती है, जैसा कि नीचे दिखाया गया है:
< लिखी हुई कहानी >समारोह कार्रवाई ( ) {
चलो डेमोलिस्ट = दस्तावेज़। getElementById ( 'उदाहरण' ) . क्लासलिस्ट . प्रतिस्थापित करें ( 'फ़ॉन्ट आकार' , 'रंग' ) ;
}
लिखी हुई कहानी >
यहाँ, सीएसएस ' फ़ॉन्ट आकार 'क्लास को CSS से बदल दिया गया है' रंग 'की आईडी वाले तत्व के लिए वर्ग' उदाहरण ”। शेष HTML और CSS कोड उपरोक्त अनुभागों के समान ही हैं।
'संशोधित करने के बाद लिखी हुई कहानी 'भाग और मुख्य HTML फ़ाइल को संकलित करने पर, आउटपुट इस तरह दिखता है:
आउटपुट से पता चलता है कि विशिष्ट सीएसएस वर्ग को किसी अन्य वर्ग से बदल दिया गया है।
विधि 8: संपत्ति का मूल्य निर्धारण करें
“ कीमत 'टोकन सूची संपत्ति चयनित HTML तत्व को निर्दिष्ट आवश्यक मान पुनर्प्राप्त करती है। जब यह ' के आगे संलग्न हो जाता है क्लासलिस्ट 'संपत्ति, चयनित तत्वों को निर्दिष्ट कक्षाएं पुनः प्राप्त हो जाती हैं, जैसा कि नीचे दिखाया गया है:
< लिखी हुई कहानी >समारोह कार्रवाई ( ) {
चलो डेमोवैल = दस्तावेज़। getElementById ( 'उदाहरण' ) . क्लासलिस्ट . कीमत ;
दस्तावेज़। getElementById ( 'प्रिंट' ) . आंतरिक HTML = डेमोवैल ;
}
लिखी हुई कहानी >
उपर्युक्त कोड स्निपेट का विवरण:
- के अंदर ' कार्रवाई ()' फ़ंक्शन बॉडी, ' कीमत 'संपत्ति' के आगे संलग्न है क्लासलिस्ट चयनित HTML तत्वों के सभी निर्दिष्ट वर्गों को पुनः प्राप्त करने के लिए संपत्ति।
- इसके बाद, उपरोक्त संपत्ति का परिणाम एक वेरिएबल में संग्रहीत हो जाता है ' डेमोवैल ” और “प्रिंट” की आईडी वाले तत्व पर डाला गया।
संकलन चरण की समाप्ति के बाद, वेबपेज पर आउटपुट निम्नानुसार उत्पन्न होता है:
आउटपुट सीएसएस कक्षाओं का नाम दिखाता है जो चयनित तत्व पर लागू होते हैं।
निष्कर्ष
HTML DOM टोकनलिस्ट ऑब्जेक्ट कई तरीकों और गुणों को संग्रहीत करने वाली एक सरणी की तरह है, जिसका उपयोग दिए गए HTML तत्व पर विशिष्ट कार्यक्षमता लागू करने के लिए किया जाता है। टोकनलिस्ट द्वारा प्रदान की गई कुछ सबसे महत्वपूर्ण और व्यापक रूप से उपयोग की जाने वाली विधियाँ हैं ' जोड़ें()', 'निकालें()', 'टॉगल()', 'शामिल है()', 'आइटम()', और 'प्रतिस्थापित करें() ”। टोकनलिस्ट द्वारा प्रदान की जाने वाली संपत्तियां हैं ' लंबाई ' और ' कीमत ”। इस आलेख में जावास्क्रिप्ट HTML DOMTokenList ऑब्जेक्ट के साथ काम करने की प्रक्रिया बताई गई है।