वेब विकास की दुनिया में, HTML तत्वों के साथ बातचीत करना और उनके मूल्यों को निकालना एक मौलिक कार्य है। चाहे आप कोई फॉर्म बना रहे हों, डेटा ला रहे हों, या सामग्री में हेरफेर कर रहे हों, जावास्क्रिप्ट का उपयोग करके तत्व मान कैसे प्राप्त करें, यह जानना आवश्यक है। इस ब्लॉग पोस्ट में, हम इसे प्राप्त करने के लिए विभिन्न तरीकों का पता लगाएंगे, प्रत्येक के अपने उपयोग के मामले और फायदे होंगे।

1. getElementById का उपयोग करना

getElementById विधि किसी तत्व का मान प्राप्त करने के सबसे सरल तरीकों में से एक है। यह अपनी अनूठी id विशेषता द्वारा किसी तत्व को लक्षित करता है।

उदाहरण:

<input type="text" id="username" value="useotools">
<button onclick="getUsername()">Get Username</button>

<script>
function getUsername() {
    const usernameElement = document.getElementById('username');
    const usernameValue = usernameElement.value;
    alert(usernameValue);
}
</script>

स्पष्टीकरण:

• getElementById विधि निर्दिष्ट id के साथ तत्व को पुनः प्राप्त करती है।
• value प्रॉपर्टी का उपयोग इनपुट तत्व का मूल्य प्राप्त करने के लिए किया जाता है।

2. querySelector का उपयोग करना

querySelector विधि आपको CSS चयनकर्ताओं का उपयोग करके तत्वों का चयन करने की अनुमति देती है। यह चयनकर्ता से मेल खाने वाला पहला तत्व लौटाता है।

उदाहरण:

<input type="text" class="user-input" value="welcome to usetoools">
<button onclick="getUserInput()">Get Input</button>

<script>
function getUserInput() {
    const inputElement = document.querySelector('.user-input');
    const inputValue = inputElement.value;
    alert(inputValue);
}
</script>

स्पष्टीकरण:

• querySelector पहला मिलान तत्व ढूंढने के लिए CSS चयनकर्ता का उपयोग करता है।
• value प्रॉपर्टी इनपुट तत्व का मान पुनर्प्राप्त करती है।

3. getElementsByClassName का उपयोग करना

getElementsByClassName विधि निर्दिष्ट वर्ग नाम के साथ तत्वों का एक संग्रह लौटाती है। फिर आप इस संग्रह में किसी विशिष्ट तत्व के मूल्य तक पहुंच सकते हैं।

उदाहरण:

<input type="text" class="user-input" value="Hello">
<input type="text" class="user-input" value="World">
<button onclick="getUserInputs()">Get Inputs</button>

<script>
function getUserInputs() {
    const inputElements = document.getElementsByClassName('user-input');
    for (let i = 0; i < inputElements.length; i++) {
        alert(inputElements[i].value);
    }
}
</script>

स्पष्टीकरण:

• getElementsByClassName निर्दिष्ट वर्ग नाम के साथ तत्वों का एक संग्रह लौटाता है।
• संग्रह के माध्यम से पुनरावृत्त करने और प्रत्येक तत्व का मान पुनर्प्राप्त करने के लिए एक लूप का उपयोग किया जाता है।

4. getElementsByTagName का उपयोग करना

getElementsByTagName विधि निर्दिष्ट टैग नाम के साथ तत्वों का एक संग्रह लौटाती है। यह विधि तब उपयोगी होती है जब आपको एक ही प्रकार के एकाधिक तत्वों से मान प्राप्त करने की आवश्यकता होती है।

उदाहरण:

<input type="text" name="user" value="Useo">
<input type="text" name="user" value="Tools">
<button onclick="getUserNames()">Get Names</button>

<script>
function getUserNames() {
    const inputElements = document.getElementsByTagName('input');
    for (let i = 0; i < inputElements.length; i++) {
        alert(inputElements[i].value);
    }
}
</script>

स्पष्टीकरण:

• getElementsByTagName सभी input तत्वों का संग्रह लौटाता है।
• संग्रह के माध्यम से पुनरावृत्त करने और प्रत्येक इनपुट तत्व का मान पुनर्प्राप्त करने के लिए एक लूप का उपयोग किया जाता है।

5. getAttribute का उपयोग करना

getAttribute विधि आपको किसी तत्व की विशिष्ट विशेषता का मान पुनर्प्राप्त करने की अनुमति देती है। यह तब उपयोगी होता है जब आपको गैर-मानक विशेषताएँ या कस्टम डेटा विशेषताएँ प्राप्त करने की आवश्यकता होती है।

उदाहरण:

<div id="user-info" data-name="Useotools.com"></div>
<button onclick="getUserInfo()">Get Info</button>

<script>
function getUserInfo() {
    const userInfoElement = document.getElementById('user-info');
    const userName = userInfoElement.getAttribute('data-name');
    alert(userName);
}
</script>

स्पष्टीकरण:

• getAttribute data-name विशेषता का मान पुनः प्राप्त करता है।
• यह विधि कस्टम विशेषताओं के लिए विशेष रूप से उपयोगी है।

6. innerHTML और textContent का उपयोग करना

उन तत्वों के लिए जिनमें पाठ्य सामग्री है, आप सामग्री प्राप्त करने के लिए innerHTML या textContent का उपयोग कर सकते हैं।

उदाहरण:

<p id="message">Welcome to Useotools!</p>
<button onclick="getMessage()">Get Message</button>

<script>
function getMessage() {
    const messageElement = document.getElementById('message');
    const messageText = messageElement.textContent;
    alert(messageText);
}
</script>

स्पष्टीकरण:

• textContent तत्व की पाठ्य सामग्री को पुनः प्राप्त करता है।
• यह विधि उन तत्वों के लिए उपयोगी है जिनमें सरल पाठ है।

निष्कर्ष

प्रभावी वेब विकास के लिए जावास्क्रिप्ट में तत्व मान प्राप्त करने के लिए विभिन्न तरीकों में महारत हासिल करना महत्वपूर्ण है। चाहे आप फॉर्म इनपुट, कस्टम विशेषताओं या टेक्स्ट सामग्री के साथ काम कर रहे हों, ये विधियां आपको अपने HTML तत्वों के साथ गतिशील रूप से इंटरैक्ट करने के लिए आवश्यक लचीलापन और शक्ति प्रदान करती हैं। इन तकनीकों को समझकर और लागू करके, आप अपने वेब एप्लिकेशन को बेहतर बना सकते हैं और अधिक इंटरैक्टिव उपयोगकर्ता अनुभव बना सकते हैं।