JavaScript से HTML एलिमेंट एट्रिब्यूट वैल्यू बदलना सीखें।
मान लें आपकी वेबसाइट पर एक एंकर एलिमेंट है, जिसमें href एट्रिब्यूट वैल्यू में एक दोषपूर्ण URL लिंक पथ है।
इसे देखने के लिए एक आम जगह आपका मेनू/नेविगेशन बार होगा:
<nav> <ul> <li> <a href="/path-to-your-page" id="some-id">लिंक</a> </li> </ul> </nav>आपकी वेबसाइट के नीचे फूटर में आंतरिक वेब पेज लिंक्स रखने के लिए एक और आम जगह है।
मान लें किसी ने गलती की। आपका href वैल्यू /contact-me है लेकिन यह /contact-us होना चाहिए, और किसी भी कारण से, आप इसे सीधे HTML कोड में हल नहीं कर सकते (शायद आपके पास बैकएंड पर लिखने की पहुंच नहीं है)।
आपको इसे जल्द से जल्द ठीक करने की आवश्यकता है ताकि आपके विजिटर्स उस पर क्लिक करने पर ब्लैंक पेज न देखें।
यदि आपके पास फ्रंटएंड कोड तक पहुंच है, जैसे CMS (कंटेंट मैनेजमेंट सिस्टम) के माध्यम से, तो आप बैकएंड को छुए बिना अपने एंकर एलिमेंट पर मौजूदा href वैल्यू को ओवरराइड करने के लिए JavaScript का उपयोग कर सकते हैं।
मैं आपको इसे करने के दो अलग-अलग तरीके दिखाऊंगा।
ID के आधार पर एलिमेंट सेलेक्ट करें
मान लें आपका HTML मार्कअप इस तरह दिखता है, प्रत्येक नेव लिंक पर एक यूनिक ID के साथ:
<nav> <ul> <li> <a href="/" id="home">होम</a> </li> <li> <a href="/services" id="services">सेवाएं</a> </li> <li> <a href="/contact-me" id="contact">संपर्क</a> </li> </ul> </nav>अब हम कॉन्टैक्ट लिंक पर href वैल्यू बदलना चाहते हैं।
सबसे पहले, अपने एंकर/लिंक एलिमेंट को उसकी id के आधार पर सेलेक्ट करें:
const contactLink = document.querySelector('#contact')फिर डॉट नोटेशन का उपयोग करके अपने एंकर एलिमेंट के href एट्रिब्यूट को सेलेक्ट करें और इसे /contact-us की नई वैल्यू दें:
contactLink.href = '/contact-us'बस इतना ही!
अब यदि आप इसे अपने कंसोल पर लॉग करते हैं, तो आप देखेंगे कि पिछली दोषपूर्ण href एट्रिब्यूट वैल्यू को नए सही URL पथ से बदल दिया गया है:
console.log(contactLink.href) // आउटपुट: "https://your-domain.com/contact-us"सभी JS कोड:
// इसकी ID के आधार पर एंकर/लिंक एलिमेंट सेलेक्ट करें const contactLink = document.querySelector('#contact') // href वैल्यू बदलें contactLink.href = '/contact-us' // परिणाम प्रिंट करें console.log(contactLink.href)एक विशिष्ट स्ट्रिंग वैल्यू के आधार पर एलिमेंट सेलेक्ट करें
आप ऐसी स्थिति में हो सकते हैं जहां आपके HTML लिंक एलिमेंट में यूनिक id या क्लास नहीं है। आपका HTML मार्कअप इस तरह दिख सकता है:
<nav> <ul> <li> <a href="/">होम</a> </li> <li> <a href="/services">सेवाएं</a> </li> <li> <a href="/contact-me">संपर्क</a> </li> </ul> </nav>कोई बात नहीं। आप querySelector() के साथ एक CSS3 सेलेक्टर का उपयोग करके निर्दिष्ट कर सकते हैं कि आप एक सटीक स्ट्रिंग वैल्यू सेलेक्ट करना चाहते हैं, इस मामले में /contact-me।
यहाँ कैसे करना है:
const contactLink = document.querySelector('a[href*="/contact-me"]')अब अपने वेरिएबल से href वैल्यू प्रिंट करें यह देखने के लिए कि क्या आपको वास्तव में वह href वैल्यू मिली जिसकी आप तलाश कर रहे थे:
console.log(contactLink.href) // आउटपुट: "https://your-domain.com/contact-me" यह मिल गया!
अब आप href वैल्यू को पिछले उदाहरण की तरह ही सही URL पथ में बदल सकते हैं:
contactLink.href = '/contact-us'सभी कोड:
// विशिष्ट href स्ट्रिंग वैल्यू के साथ लिंक सेलेक्ट करें const contactLink = document.querySelector('a[href*="/contact-me"]') // href स्ट्रिंग वैल्यू बदलें contactLink.href = '/contact-us' // परिणाम प्रिंट करें console.log(contactLink.href)
