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

1. HTML तत्वों तक पहुँचना

GetElementById का उपयोग करना

किसी HTML तत्व तक पहुंचने के सबसे सरल तरीकों में से एक इसकी आईडी विशेषता का उपयोग करना है। Document.getElementById विधि उस तत्व को लौटाती है जिसमें निर्दिष्ट मान के साथ आईडी विशेषता होती है।

let element = document.getElementById('myElement');

GetElementsByClassName का उपयोग करना

एक ही क्लास नाम वाले एकाधिक तत्वों तक पहुंचने के लिए, document.getElementsByClassName का उपयोग किया जाता है। यह विधि तत्वों का एक लाइव HTMLCollection लौटाती है।

let elements = document.getElementsByClassName('myClass');

GetElementsByTagName का उपयोग करना

तत्वों को उनके टैग नाम से एक्सेस करने के लिए, document.getElementsByTagName का उपयोग किया जा सकता है। यह विधि दिए गए टैग नाम के साथ तत्वों का एक लाइव HTML संग्रह लौटाती है।

let paragraphs = document.getElementsByTagName('p');

querySelector और querySelectorAll का उपयोग करना

अधिक जटिल चयनों के लिए, querySelector और querySelectorAll शक्तिशाली समाधान प्रदान करते हैं। querySelector पहला तत्व लौटाता है जो निर्दिष्ट CSS चयनकर्ता से मेल खाता है, जबकि querySelectorAll सभी मेल खाने वाले तत्व लौटाता है।

let firstElement = document.querySelector('.myClass');
let allElements = document.querySelectorAll('.myClass');

2. HTML सामग्री में हेर-फेर करना

आंतरिक HTML बदलना

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

let element = document.getElementById('myElement');
element.innerHTML = '
New content
';

आंतरिक पाठ बदलना

किसी तत्व की केवल पाठ्य सामग्री को संशोधित करने के लिए, insideText या textContent प्रॉपर्टी का उपयोग करें। आंतरिक HTML के विपरीत, ये गुण HTML टैग को पार्स नहीं करते हैं।

let element = document.getElementById('myElement');
element.innerText = 'New text content';

गुणों को संशोधित करना

आप setAttribute विधि का उपयोग करके या सीधे विशेषता गुणों तक पहुंच कर किसी तत्व की विशेषताओं को बदल सकते हैं।

let element = document.getElementById('myElement');
element.setAttribute('src', 'newImage.jpg');

// Or directly
element.src = 'newImage.jpg';

कक्षाएं जोड़ना और हटाना

जावास्क्रिप्ट किसी तत्व पर कक्षाएं जोड़ने, हटाने और टॉगल करने के लिए क्लासलिस्ट प्रॉपर्टी प्रदान करता है। यह सीएसएस शैलियों को गतिशील रूप से हेरफेर करने के लिए विशेष रूप से उपयोगी है।

let element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('toggleClass');

3. तत्व बनाना और हटाना

नए तत्वों का निर्माण

एक नया HTML तत्व बनाने के लिए document.createElement विधि का उपयोग किया जाता है। तत्व बनाने के बाद, आप इसे एपेंड चाइल्ड या इंसर्टबिफोर जैसी विधियों का उपयोग करके DOM में जोड़ सकते हैं।

let newElement = document.createElement('div');
newElement.innerHTML = 'I am a new element';
document.body.appendChild(newElement);

तत्वों को हटाना

किसी तत्व को हटाने के लिए, रिमूवचाइल्ड विधि का उपयोग करें। सबसे पहले, उस तत्व के मूल नोड तक पहुंचें जिसे आप हटाना चाहते हैं, फिर उस पर रिमूव चाइल्ड को कॉल करें।

let parent = document.getElementById('parentElement');
let child = document.getElementById('childElement');
parent.removeChild(child);

तत्वों का प्रतिस्थापन

रिप्लेसचाइल्ड विधि आपको मौजूदा चाइल्ड नोड को एक नए नोड से बदलने की अनुमति देती है।

let parent = document.getElementById('parentElement');
let oldChild = document.getElementById('oldChild');
let newChild = document.createElement('div');
newChild.innerHTML = 'I am a new child';
parent.replaceChild(newChild, oldChild);

4. इवेंट हैंडलिंग

ईवेंट श्रोताओं को जोड़ना

इवेंट श्रोता आपको उपयोगकर्ता इंटरैक्शन के जवाब में जावास्क्रिप्ट कोड चलाने में सक्षम बनाते हैं। AddEventListener विधि ईवेंट जोड़ने का पसंदीदा तरीका है क्योंकि यह एक ही प्रकार के कई ईवेंट को एक तत्व में जोड़ने की अनुमति देता है।

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

इवेंट श्रोताओं को हटाना

आप रिमूवइवेंटलिस्टनर विधि का उपयोग करके इवेंट श्रोताओं को भी हटा सकते हैं। इसके लिए आपको ईवेंट श्रोता निर्माण के दौरान उपयोग किए गए सटीक फ़ंक्शन का संदर्भ देना आवश्यक है।

function handleClick() {
    alert('Button clicked!');
}

let button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

// Later on...
button.removeEventListener('click', handleClick);

5. प्रपत्रों के साथ कार्य करना

प्रपत्र मानों तक पहुँचना

फॉर्म तत्वों के मूल्यों तक पहुंचने के लिए, मूल्य संपत्ति का उपयोग करें। यह उपयोगकर्ता इनपुट पढ़ने के लिए उपयोगी है।

let input = document.getElementById('myInput');
let inputValue = input.value;

प्रपत्रों का सत्यापन

सबमिट करने से पहले फॉर्म इनपुट को मान्य करने के लिए जावास्क्रिप्ट का उपयोग किया जा सकता है। यह तत्काल प्रतिक्रिया प्रदान करके उपयोगकर्ता अनुभव को बढ़ाता है।

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    let input = document.getElementById('myInput');
    if (input.value === '') {
        alert('Input cannot be empty');
        event.preventDefault();
    }
});

निष्कर्ष

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