html
सामग्री तालिका
- परिचय.............................................................1
- डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) को समझना..............3
- querySelector के साथ तत्वों का चयन..........................6
- innerText और innerHTML के साथ सामग्री संशोधित करना.........9
- सामग्री जोड़ना और जोड़ना................................12
- forEach के साथ तत्वों के माध्यम से लूपिंग.......................16
- त्रुटि हैंडलिंग और डिबगिंग....................................20
- व्यावहारिक उदाहरण: वेबपेज सामग्री अपडेट करना.................24
- निष्कर्ष................................................................28
- अतिरिक्त संसाधन..................................................30
---
परिचय
इस व्यापक गाइड JavaScript DOM Manipulation में आपका स्वागत है, जहाँ हम एक वेबपेज की सामग्री को गतिशील रूप से संशोधित करने के तरीकों का पता लगाएंगे। चाहे आप वेब विकास में नए हो रहे हों या एक डेवलपर जो अपनी बुनियादी ज्ञान को मजबूत करना चाह रहा हो, यह eBook आपकी समझ और कौशल को बढ़ाने के लिए तैयार किया गया है।
आज के इंटरएक्टिव वेब वातावरण में, DOM को मैनिपुलेट करने की क्षमता महत्वपूर्ण है। यह डेवलपर्स को गतिशील और प्रतिक्रियाशील उपयोगकर्ता अनुभव बनाने की अनुमति देती है, जिससे HTML तत्वों को तुरंत अपडेट, जोड़ने या हटाने की सुविधा मिलती है। यह गाइड आपको JavaScript का उपयोग करके DOM मैनिपुलेशन के मूलभूत तत्वों से परिचित कराएगा, जिसमें तत्वों का चयन करना से लेकर सामान्य त्रुटियों को संभालना शामिल है।
इस eBook के अंत तक, आप वेबपेज की सामग्री को प्रभावी ढंग से बदलने का ज्ञान प्राप्त कर लेंगे, जिससे कार्यक्षमता और उपयोगकर्ता सहभागिता दोनों में सुधार होगा। आइए शुरू करें!
---
डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) को समझना
Document Object Model (DOM) वेब दस्तावेजों के लिए एक प्रोग्रामिंग इंटरफ़ेस है। यह पृष्ठ की संरचना को ऑब्जेक्ट्स के पेड़ के रूप में प्रस्तुत करता है, जिससे स्क्रिप्ट्स को एक वेबपेज की सामग्री, संरचना, और स्टाइलिंग को गतिशील रूप से अपडेट करने में सक्षम बनाता है।
मुख्य अवधारणाएँ
- Node: DOM पेड़ का बुनियादी निर्माण ब्लॉक, जो तत्वों, पाठ, या टिप्पणियों का प्रतिनिधित्व करता है।
- Element: एक प्रकार का node जो HTML टैग्स का प्रतिनिधित्व करता है, जैसे <div>, <p>, या <h1>।
- Attributes: तत्वों की संपत्तियाँ, जैसे id, class, या src।
- Methods: ऐसे फंक्शन्स जिन्हें DOM तत्वों पर कॉल किया जा सकता है, जैसे querySelector या innerText।
DOM Manipulation क्यों महत्वपूर्ण है
- इंटरएक्टिविटी: पृष्ठ को रीलोड किए बिना उपयोगकर्ता क्रियाओं पर गतिशील प्रतिक्रिया सक्षम बनाता है।
- परफॉर्मेंस: क्लाइंट-साइड पर कार्यों को संभालकर सर्वर लोड को कम करता है।
- यूजर एक्सपीरियंस: एक अधिक आकर्षक और प्रतिक्रियाशील इंटरफेस बनाता है।
DOM को समझना किसी भी वेब डेवलपर के लिए बुनियादी है। यह स्थिर HTML संरचना और आधुनिक वेब अनुप्रयोगों में उपयोगकर्ताओं से अपेक्षित गतिशील व्यवहार के बीच की खाई को पाटता है।
---
querySelector के साथ तत्वों का चयन
वेबपेज पर तत्वों को मैनिपुलेट करने के लिए, पहले आपको उन्हें चुनने की आवश्यकता है। JavaScript DOM तत्वों का चयन करने के लिए कई विधियाँ प्रदान करता है, जिसमें querySelector सबसे बहुमुखी में से एक है।
querySelector का उपयोग करना
querySelector विधि दस्तावेज़ के भीतर पहले ऐसे तत्व को लौटाती है जो निर्दिष्ट CSS सेलेक्टर से मेल खाता है।
सिंटेक्स:
1 2 3 |
let element = document.querySelector('selector'); |
उदाहरण: एक पैराग्राफ टैग का चयन करना
1 2 3 4 |
let greeting = document.querySelector('p'); console.log(greeting); |
व्याख्या:
- ऊपर का कोड दस्तावेज़ में पहला <p> टैग चुनता है और इसे कंसोल में लॉग करता है।
- document.querySelector('p') पहले पैराग्राफ तत्व को प्राप्त करता है।
- console.log(greeting) चयनित तत्व को ब्राउज़र के कंसोल में दिखाता है।
सर्वोत्तम अभ्यास
- विशिष्ट सेलेक्टर्स: अधिक विशिष्ट सेलेक्टर्स का उपयोग करके तत्वों को सटीक रूप से लक्षित करें, खासकर जब समान प्रकार के कई तत्व मौजूद हों।
1 2 3 |
let header = document.querySelector('h2'); |
- क्लास और ID का उपयोग करना: तत्वों का चयन करने के लिए क्लास या ID का उपयोग करने को प्राथमिकता दें ताकि अस्पष्टता से बचा जा सके।
1 2 3 4 |
let mainDiv = document.querySelector('.myDiv'); let uniqueElement = document.querySelector('#uniqueId'); |
---
innerText और innerHTML के साथ सामग्री संशोधित करना
एक बार जब आप एक तत्व का चयन कर लेते हैं, तो आप innerText और innerHTML जैसी प्रॉपर्टीज का उपयोग करके इसकी सामग्री को संशोधित कर सकते हैं।
innerText
innerText प्रॉपर्टी एक node और उसकी वंशजों की पाठ सामग्री का प्रतिनिधित्व करती है।
उदाहरण: पाठ सामग्री प्राप्त करना और अपडेट करना
1 2 3 4 5 6 |
let greeting = document.querySelector('h2'); console.log(greeting.innerText); // वर्तमान पाठ प्राप्त करता है greeting.innerText = 'Welcome to SteadyEasy'; // पाठ अपडेट करता है |
व्याख्या:
- greeting.innerText <h2> टैग के अंदर वर्तमान पाठ को प्राप्त करता है।
- innerText को एक नया मान असाइन करने से वेबपेज पर प्रदर्शित पाठ अपडेट हो जाता है।
innerHTML
innerHTML प्रॉपर्टी आपको किसी तत्व के अंदर HTML सामग्री को प्राप्त करने या सेट करने की अनुमति देती है, जिसमें HTML टैग्स शामिल हैं।
उदाहरण: HTML सामग्री अपडेट करना
1 2 3 4 5 6 |
let myDiv = document.querySelector('.myDiv'); console.log(myDiv.innerHTML); // HTML सामग्री प्राप्त करता है myDiv.innerHTML = '<h3>This is the content of the div now.</h3>'; // HTML सामग्री अपडेट करता है |
व्याख्या:
- myDiv.innerHTML .myDiv क्लास के अंदर वर्तमान HTML को प्राप्त करता है।
- innerHTML में नया HTML असाइन करने से मौजूदा सामग्री बदल जाती है, जिससे नए तत्वों और स्टाइलिंग सहित जटिल अपडेट्स की अनुमति मिलती है।
innerText बनाम innerHTML कब उपयोग करें
- plain text सामग्री अपडेट या प्राप्त करने के लिए innerText का उपयोग करें बिना किसी HTML फॉर्मेटिंग के।
- HTML तत्वों को डालने या सामग्री पर विशिष्ट फॉर्मेटिंग लागू करने के लिए innerHTML का उपयोग करें।
तुलना तालिका: innerText बनाम innerHTML
विशेषता | innerText | innerHTML |
---|---|---|
सामग्री प्रकार | सादा पाठ | HTML सामग्री टैग्स के साथ |
प्रदर्शन | सादा पाठ के लिए आमतौर पर तेज | HTML पार्सिंग के कारण धीमा हो सकता है |
सुरक्षा | उपयोगकर्ता-जनित सामग्री डालने के लिए सुरक्षित | अविश्वसनीय HTML डालने पर जोखिमपूर्ण |
उपयोग का मामला उदाहरण | एक पैराग्राफ का पाठ अपडेट करना | डायनामिक रूप से एक नया लिस्ट आइटम जोड़ना |
---
सामग्री जोड़ना और जोड़ना
मौजूदा सामग्री को संशोधित करने के अलावा, आप नए तत्व जोड़ना या मौजूदा तत्वों में अतिरिक्त जानकारी जोड़ना चाह सकते हैं।
नई सामग्री जोड़ना
नई सामग्री जोड़ने के लिए, आप नए HTML टैग्स डालकर innerHTML को मैनिपुलेट कर सकते हैं।
उदाहरण: एक नया हेडिंग जोड़ना
1 2 3 4 |
let myDiv = document.querySelector('.myDiv'); myDiv.innerHTML = '<h3>This is the content of the div now.</h3>'; |
व्याख्या:
- यह .myDiv के अंदर मौजूदा सामग्री को एक नए <h3> हेडिंग के साथ बदल देता है।
- सावधान रहें, क्योंकि इस दृष्टिकोण से तत्व के भीतर सभी मौजूदा सामग्री ओवरराइट हो जाती है।
सामग्री जोड़ना
मौजूदा सामग्री को हटाए बिना नई सामग्री जोड़ने के लिए, innerText या innerHTML के साथ += ऑपरेटर का उपयोग करें।
उदाहरण: पैराग्राफ में पाठ जोड़ना
1 2 3 4 5 6 7 |
let paragraphs = document.querySelectorAll('p'); paragraphs.forEach((element) => { let additionalText = ' Additional text.'; element.innerText += additionalText; }); |
व्याख्या:
- document.querySelectorAll('p') सभी <p> टैग्स का चयन करता है।
- forEach मेथड प्रत्येक पैराग्राफ पर इटरेट करता है, " Additional text." को इसकी मौजूदा सामग्री में जोड़ता है।
- यह सुनिश्चित करता है कि मूल सामग्री बरकरार रहे जबकि नई जानकारी जोड़ी जाए।
व्यावहारिक कोड उदाहरण
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let greeting = document.querySelector('h2'); greeting.innerText = 'Welcome to SteadyEasy'; let myDiv = document.querySelector('.myDiv'); myDiv.innerHTML = '<h3>This is the content of the div now.</h3>'; let paragraphs = document.querySelectorAll('p'); paragraphs.forEach((element) => { let additionalText = ' Additional text.'; element.innerText += additionalText; }); |
आउटपुट व्याख्या:
- <h2> टैग अब "Welcome to SteadyEasy" प्रदर्शित करता है।
- .myDiv क्लास एक नए <h3> हेडिंग के साथ अनुकूलित है।
- प्रत्येक <p> टैग में " Additional text." जोड़ा गया है।
---
forEach के साथ तत्वों के माध्यम से लूपिंग
कई तत्वों के साथ काम करते समय, forEach जैसे लूप्स DOM मैनिपुलेशन के लिए प्रभावी बन जाते हैं।
querySelectorAll के साथ forEach का उपयोग करना
querySelectorAll विधि सभी तत्वों का चयन करती है जो निर्दिष्ट CSS सेलेक्टर से मेल खाते हैं और एक NodeList लौटाती है, जिसे forEach का उपयोग करके इटरेट किया जा सकता है।
उदाहरण: कई पैराग्राफ अपडेट करना
1 2 3 4 5 6 |
let paragraphs = document.querySelectorAll('p'); paragraphs.forEach((element) => { element.innerText = 'Updated paragraph content.'; }); |
व्याख्या:
- document.querySelectorAll('p') सभी <p> टैग्स का चयन करता है।
- forEach मेथड प्रत्येक पैराग्राफ के टेक्स्ट कंटेंट को "Updated paragraph content." में अपडेट करता है।
लूप्स में त्रुटियों को संभालना
यदि चयनित तत्वों का सही संदर्भ नहीं किया गया हो या कोड में कोई टाइपो हो, तो त्रुटियाँ हो सकती हैं।
उदाहरण: forEach त्रुटि को डिबग करना
1 2 3 4 5 6 |
let paragraphs = document.querySelectorAll('p'); paragraphs.forEach((element) => { console.log(element.innerText); }); |
मान लीजिए कि आपको एक त्रुटि मिलती है: Cannot read property 'innerText' of undefined.
संभावित कारण:
- टाइपोग्राफिकल त्रुटियाँ:
- गलत नामांकित वेरिएबल (जैसे, text के बजाय element का उपयोग करना)।
12345paragraphs.forEach((element) => {console.log(text.innerText); // 'text' अपरिभाषित है}); - गलत सेलेक्टर:
- जब कई तत्वों को चुनने का इरादा हो, तो querySelector के बजाय querySelectorAll का उपयोग करना।
समाधान:
- forEach लूप के भीतर सही वेरिएबल का उपयोग सुनिश्चित करें।
1 2 3 4 5 |
paragraphs.forEach((element) => { console.log(element.innerText); // सही वेरिएबल नाम }); |
- सुनिश्चित करें कि सेलेक्टर सही ढंग से कई तत्वों को लक्षित कर रहा है querySelectorAll का उपयोग करके।
---
त्रुटि हैंडलिंग और डिबगिंग
प्रभावी त्रुटि हैंडलिंग और डिबगिंग किसी भी डेवलपर के लिए महत्वपूर्ण कौशल हैं, यह सुनिश्चित करते हुए कि आपका कोड सुचारू रूप से और कुशलतापूर्वक चलता है।
DOM Manipulation में सामान्य त्रुटियाँ
- Cannot read property 'innerText' of undefined
- जब अपरिभाषित तत्व की प्रॉपर्टी एक्सेस करने की कोशिश करते हैं, अक्सर गलत सेलेक्टर्स या टाइपो के कारण।
- Uncaught TypeError: paragraphs.forEach is not a function
- जब forEach को NodeList पर उपयोग करने का प्रयास करते हैं जो इसे सपोर्ट नहीं करता, अक्सर पुराने ब्राउज़र्स में।
- Syntax Errors
- ब्रैकेट्स, सेमीकोलन्स की कमी, या उद्धरणों के गलत उपयोग से कोड फेल हो सकता है।
डिबगिंग तकनीकें
- Console Logging:
- वेरिएबल्स को प्रिंट करने और विभिन्न चरणों पर उनके मानों को सत्यापित करने के लिए console.log() का उपयोग करें।
123console.log(paragraphs); // चेक करें कि तत्व सही ढंग से चयनित हैं या नहीं - Inspecting the DOM:
- वेबपेज पर राइट-क्लिक करें और "Inspect" चुनें DOM संरचना देखने के लिए और सुनिश्चित करें कि तत्व जैसा अपेक्षित हैं।
- Using Breakpoints:
- ब्राउज़र डेवलपर टूल्स का उपयोग करके ब्रेकपॉइंट सेट करें और अपने कोड को लाइन दर लाइन स्टेप करें।
- Validating Selectors:
- सुनिश्चित करें कि आपके CSS सेलेक्टर्स querySelector या querySelectorAll में सही ढंग से लक्षित तत्वों को चुन रहे हैं।
उदाहरण: forEach त्रुटि को ठीक करना
समस्या वाली कोड:
1 2 3 4 5 6 |
let text = document.querySelectorAll('p'); text.forEach((element) => { console.log(element.innerText); }); |
त्रुटि: Cannot read property 'forEach' of undefined
समाधान:
- समस्या की पहचान करें: वेरिएबल text सही ढंग से querySelectorAll का उपयोग करके असाइन किया गया है, लेकिन सुनिश्चित करें कि स्क्रिप्ट चलने से पहले सभी तत्व सही ढंग से लोड हो चुके हैं।
- सही वेरिएबल उपयोग:
1 2 3 4 5 6 |
let paragraphs = document.querySelectorAll('p'); paragraphs.forEach((element) => { console.log(element.innerText); }); |
- तत्वों का अस्तित्व सुनिश्चित करें: सुनिश्चित करें कि <p> टैग HTML में तब मौजूद हैं जब स्क्रिप्ट निष्पादित होती है।
---
व्यावहारिक उदाहरण: वेबपेज सामग्री अपडेट करना
आइए एक व्यावहारिक उदाहरण के साथ सब कुछ एक साथ रखें जो वेबपेज के विभिन्न हिस्सों को अपडेट करता है।
HTML संरचना (index.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM Manipulation Example</title> </head> <body> <h2>Hello World</h2> <div class="myDiv"> <p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p> <p>Fourth paragraph.</p> </div> <script src="index.js"></script> </body> </html> |
JavaScript कोड (index.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Greeting का चयन और संशोधित करना let greeting = document.querySelector('h2'); console.log(greeting); console.log(greeting.innerText); // आउटपुट: Hello World // Greeting पाठ अपडेट करना greeting.innerText = 'Welcome to SteadyEasy'; console.log(greeting.innerText); // आउटपुट: Welcome to SteadyEasy // Div सामग्री का चयन और संशोधित करना let myDiv = document.querySelector('.myDiv'); console.log(myDiv.innerHTML); // Div की वर्तमान HTML आउटपुट करता है // Div सामग्री को एक नए हेडिंग के साथ बदलना myDiv.innerHTML = '<h3>This is the content of the div now.</h3>'; console.log(myDiv.innerHTML); // नई HTML आउटपुट करता है // पैराग्राफ का पुन: चयन करना और पाठ जोड़ना let paragraphs = document.querySelectorAll('p'); paragraphs.forEach((element) => { let additionalText = ' Additional text.'; element.innerText += additionalText; }); |
अपेक्षित आउटपुट
- प्रारंभिक Greeting:
- Console: <h2> तत्व और इसका प्रारंभिक पाठ "Hello World" लॉग करता है।
- अपडेटेड Greeting:
- Webpage: <h2> टैग अब "Welcome to SteadyEasy" प्रदर्शित करता है।
- Div Content:
- Console: .myDiv के अंदर प्रारंभिक HTML लॉग करता है, जिसमें चार <p> टैग्स शामिल हैं।
- Updated Div Content:
- Webpage: .myDiv क्लास अब <h3> हेडिंग के साथ "This is the content of the div now." टेक्स्ट शामिल है।
- पैराग्राफ में पाठ जोड़ना:
- Console: प्रत्येक <p> टैग के अपडेटेड innerText को " Additional text." के साथ लॉग करता है।
- Webpage: प्रत्येक मौजूदा <p> टैग "First paragraph. Additional text." प्रदर्शित करता है, और इसी तरह अन्य के लिए भी।
स्टेप-बाय-स्टेप व्याख्या
- तत्वों का चयन:
- <h2> और .myDiv तत्वों को querySelector का उपयोग करके चयनित किया जाता है।
- पाठ सामग्री को संशोधित करना:
- <h2> के innerText को "Hello World" से "Welcome to SteadyEasy" में अपडेट किया गया है।
- HTML सामग्री को बदलना:
- .myDiv के innerHTML को एक नए <h3> तत्व के साथ बदला गया है, जिससे मूल <p> टैग्स हटा दिए जाते हैं।
- अतिरिक्त पाठ जोड़ना:
- सभी <p> टैग्स querySelectorAll का उपयोग करके चयनित हैं और forEach के साथ इटरेट किए जाते हैं, प्रत्येक में " Additional text." जोड़ा जाता है।
यह उदाहरण बुनियादी DOM मैनिपुलेशन तकनीकों का प्रदर्शन करता है, दर्शाता है कि कैसे तत्वों का चयन करें, उनकी सामग्री को संशोधित करें, और कई तत्वों को कुशलता से संभालें।
---
निष्कर्ष
JavaScript DOM Manipulation में महारत हासिल करना गतिशील और इंटरएक्टिव वेब अनुप्रयोग बनाने के लिए एक आवश्यक कौशल है। इस eBook ने मूलभूत पहलुओं को कवर किया है, जिसमें querySelector के साथ DOM चयन, innerText और innerHTML का उपयोग करके सामग्री संशोधन, नई जानकारी जोड़ना, और forEach के साथ कई तत्वों को इटरेट करना शामिल है।
मुख्य सीख
- DOM चयन: सटीक तत्व लक्षित करने के लिए querySelector और querySelectorAll का उपयोग करें।
- सामग्री संशोधन: सादा पाठ अपडेट के लिए innerText का उपयोग करें और HTML सामग्री परिवर्तनों के लिए innerHTML का उपयोग करें।
- सामग्री जोड़ना: मौजूदा सामग्री को ओवरराइट किए बिना नई जानकारी जोड़ने के लिए कंकेटनेशन का लाभ उठाएं।
- इटरेशन: forEach जैसे लूप्स के साथ कई तत्वों को कुशलतापूर्वक हैंडल करें।
- त्रुटि हैंडलिंग: सामान्य DOM manipulation मुद्दों को ठीक करने के लिए डिबगिंग तकनीकों को लागू करें।
कार्यवाही के लिए कॉल
अपने समझ को मजबूत करने के लिए, अपने स्वयं के वेब पेज बनाने और इन DOM manipulation तकनीकों को लागू करने का अभ्यास करें। विभिन्न सेलेक्टर्स, सामग्री संशोधनों, और इवेंट-ड्रिवेन परिवर्तनों के साथ प्रयोग करें ताकि आप तुरंत परिणाम देख सकें। शुभकामनाएँ!
---
अतिरिक्त संसाधन
- MDN Web Docs:
- JavaScript Tutorials:
- Tools:
- Chrome DevTools
- Visual Studio Code - JavaScript लिखने और डिबग करने के लिए एक लोकप्रिय कोड एडिटर
- Books:
- JavaScript: The Good Parts by Douglas Crockford
- Eloquent JavaScript by Marijn Haverbeke
इन संसाधनों को अपनाएं ताकि आप अपने JavaScript और DOM manipulation कौशल को और आगे बढ़ा सकें, जिससे अधिक उन्नत वेब विकास परियोजनाओं के लिए रास्ता प्रशस्त हो सके।
---
नोट: यह लेख AI द्वारा जनरेट किया गया है।