यह आलेख जावास्क्रिप्ट में सूची आइटम के अंदर एंकर तत्व की आईडी पुनर्प्राप्त करने की प्रक्रिया प्रदान करता है।
जावास्क्रिप्ट में किसी सूची आइटम के अंदर एंकर की आईडी कैसे प्राप्त करें?
किसी तत्व की आईडी विशेषता एक विशिष्ट पहचानकर्ता है जिसका उपयोग जावास्क्रिप्ट फ़ंक्शन में उस तत्व में हेरफेर और उपयोग करने के लिए किया जा सकता है। उपयोगकर्ता विभिन्न तरीकों से अपनी आईडी का उपयोग करके तत्व प्राप्त कर सकते हैं। हालाँकि, किसी HTML तत्व की आईडी पुनर्प्राप्त करना मुश्किल हो सकता है। हालाँकि, किसी HTML तत्व की आईडी विशेषता को पुनः प्राप्त करना थोड़ा जटिल हो सकता है।
इसी तरह, 'के अंदर एंकर तत्वों के मामले में' सामग्री सूचीबद्ध करें ”, उपयोगकर्ता सीधे एंकर तत्व को कॉल नहीं कर सकता है और उसकी आईडी प्राप्त नहीं कर सकता है क्योंकि कई एंकर तत्व होंगे क्योंकि वे एक सूची में मौजूद हैं। इस स्थिति के लिए, नीचे दिया गया प्रदर्शन दिखाता है कि सूची आइटम के अंदर एंकर तत्व की आईडी कैसे प्राप्त करें:
< एचटीएमएल >
< शरीर >
< डिव >
< उल पहचान = 'सूची' >
< वह >
< ए पहचान = 'एंकर1' href = '#' > एंकर तत्व 1 < / ए >
< / वह >
< वह >
< ए पहचान = 'एंकर2' href = '#' > एंकर तत्व 2 < / ए >
< / वह >
< वह >
< ए पहचान = 'एंकर3' href = '#' > एंकर तत्व 3 < / ए >
< / वह >
< / उल >
< / डिव >
< पी > उपरोक्त सूची से एंकर तत्वों की आईडी प्राप्त करने के लिए नीचे दिए गए बटन पर क्लिक करें! < / पी >
< बटन क्लिक पर = 'मायफंक्शन()' > आईडी प्राप्त करें < / बटन >
< पी पहचान = 'जड़' < / पी >
< लिखी हुई कहानी >
फ़ंक्शन myFunction() {
चलो listItems = document.querySelectorAll('#list a[id]');
के लिए (मान लीजिए i = 0; i < listItems.length; मैं++ ) {
होने देना पहचान = सूची आइटम [ मैं ] . पहचान ;
document.getElementById ( 'जड़' ) .innerHTML+ =
'एंकर तत्व की आईडी' + ( मैं + 1 ) + ' है: ' + पहचान + '
';
}
}
< / लिखी हुई कहानी >
< / शरीर >
< / एचटीएमएल >
उपरोक्त कोड की व्याख्या इस प्रकार है:
- एक आईडी के साथ एक अव्यवस्थित सूची ' सूची ' बनाया और समाहित किया गया है ' टैग.
- तीन एंकर टैग सूची आइटम के भीतर बनाए गए हैं और आईडी के साथ प्रदान किए गए हैं। एंकर1 ', ' एंकर2 ', और ' एंकर3 ' क्रमश।
- अगला, एक ' <पी> 'तत्व बनाया गया है और इसमें कुछ पाठ्य सामग्री शामिल है।
- इसके बाद, 'का उपयोग करके एक बटन तत्व बनाया जाता है <बटन> टैग. “ क्लिक पर() 'बटन की विशेषता' नामक फ़ंक्शन के साथ प्रदान की जाती है मेराफ़ंक्शन() ”।
- एक खाली ' <पी> 'आईडी के साथ तत्व' के लिए ' बनाया गया है।
- अगला, 'के अंदर <स्क्रिप्ट> 'टैग, एक फ़ंक्शन जिसका नाम' है मेराफ़ंक्शन() ' बनाया गया है।
- फ़ंक्शन के अंदर, एक स्थिरांक जिसका नाम ' सूची आइटम ' बनाया गया है।
- यह स्थिरांक 'का उपयोग करके सभी एंकर तत्वों की आईडी के साथ प्रदान किया जाता है' दस्तावेज़.querySelectorAll() ' तरीका। यह विधि सूची की आईडी और 'की एक क्वेरी' के साथ प्रदान की गई है सहायता] ”।
- फिर एक ' के लिए 'लूप को' के माध्यम से लूप करने के लिए बनाया गया है सूची आइटम ' स्थिर।
- फिर एंकर तत्वों की आईडी को 'के स्थान पर मुद्रित किया जाता है' पी 'आईडी के साथ तत्व' के लिए ”। यह ' का उपयोग करके किया जाता है document.getElementById().innerHTML ' तरीका।
आउटपुट:
नीचे दिए गए आउटपुट से, एंकर तत्व एक सूची में मौजूद हैं, और उपयोगकर्ता 'पर क्लिक करके अपनी आईडी प्राप्त कर सकते हैं' आईडी प्राप्त करें ' बटन।
यह सब सूची आइटम के अंदर एंकर तत्वों की आईडी पुनर्प्राप्त करने के बारे में है।
निष्कर्ष
किसी सूची आइटम के अंदर एंकर तत्व की आईडी पुनर्प्राप्त करने के लिए, अंतर्निहित जावास्क्रिप्ट ' दस्तावेज़.querySelectorAll() 'विधि का प्रयोग किया जा सकता है। इसके अतिरिक्त, इन एंकर तत्वों की प्राप्त आईडी को अंतर्निहित जावास्क्रिप्ट का उपयोग करके वेबपेज पर मुद्रित किया जा सकता है। .innerHTML() ' तरीका। इस आलेख ने जावास्क्रिप्ट में एक सूची आइटम के अंदर एक एंकर तत्व की आईडी पुनर्प्राप्त करने की प्रक्रिया प्रदान की है।