JavaScript DOM Manipulation – Full Course for Beginners
Watch this lesson to understand JavaScript DOM Manipulation – Full Course for Beginners — takes about 120 minutes.
आप क्या सीखेंगे
- डॉक्यूमेंट ऑब्जेक्ट मॉडल (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 की मूल बातें जानते हैं, तो आप इवेंट हैंडलिंग के बारे में सीखने के लिए तैयार हैं। इवेंट हैंडलिंग आपको वेब पेजों पर उपयोगकर्ता इंटरैक्शन को संभालने की अनुमति देता है और यह आपके वेब पेजों को और भी डायनामिक बनाने में मदद कर सकता है।
Go deeper on Modern JavaScript — ES6 से Async/Await तक
Hand-picked books and tools our learners actually use. Affiliate-supported — same price for you, supports free lessons.