JavaScript DOM Manipulation – Full Course for Beginners

आप क्या सीखेंगे

• डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) की मूल बातें और इसका उपयोग कैसे करें
• DOM में तत्वों को चुनने और मैनिप्यूलेट करने के विभिन्न तरीके
• DOM में इवेंट हैंडलिंग और इसके उपयोग के मामले

मुख्य अवधारणाएं

DOM एक पेड़ जैसी संरचना है जिसमें नोड्स होते हैं, जो तत्वों, विशेषताओं, और पाठ सामग्री को दर्शाते हैं। DOM में तत्वों को चुनने के लिए पांच मुख्य तरीके हैं: getElementById, getElementsByClassName, getElementsByTagName, querySelector, और querySelectorAll। DOM में तत्वों को मैनिप्यूलेट करने के लिए विभिन्न तरीके हैं, जैसे कि स्टाइल बदलना, विशेषताएं जोड़ना या हटाना, और नए तत्व जोड़ना।

कोड उदाहरण

const title = document.getElementById('main-heading');
console.log(title);

यह कोड तत्व को चुनने और इसे एक वेरिएबल में संग्रहीत करने का एक उदाहरण है।

const listItems = document.querySelectorAll('.list-item');
console.log(listItems);

यह कोड सभी तत्वों को चुनने का एक उदाहरण है जिनके पास एक विशेष क्लास है।

const ul = document.querySelector('ul');
ul.appendChild(li);

यह कोड एक नए तत्व को एक मौजूदा तत्व में जोड़ने का एक उदाहरण है।

पाठ सारांश

इस पाठ में, आपने डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) की मूल बातें सीखीं। आपने देखा कि DOM एक पेड़ जैसी संरचना है जिसमें नोड्स होते हैं, जो तत्वों, विशेषताओं, और पाठ सामग्री को दर्शाते हैं। आपने सीखा कि DOM में तत्वों को चुनने के लिए पांच मुख्य तरीके हैं और आपने विभिन्न तरीकों से तत्वों को मैनिप्यूलेट करने के उदाहरण देखे। आपने यह भी सीखा कि नए तत्वों को जोड़ना और मौजूदा तत्वों को हटाना कैसे होता है। इस पाठ के बाद, आप DOM के साथ काम करने में अधिक आत्मविश्वास महसूस करेंगे और वेब पेजों को डायनामिक बनाने के लिए तैयार होंगे।

अभ्यास व्यायाम

एक वेब पेज बनाएं जिसमें एक सूची होती है और उस सूची को डायनामिक रूप से अपडेट करने के लिए DOM का उपयोग करें। आप सूची में नए आइटम जोड़ सकते हैं और मौजूदा आइटम हटा सकते हैं।

आगे क्या है

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