चाय और कोड लेक्चर नोट्स

परिचय

• DOM पर इन-डेप्थ चर्चा
• भविष्य में जावास्क्रिप्ट की इनर वर्किंग की स्टडी

DOM की मूल बातें

• DOM का उपयोग और उसकी कार्यप्रणाली
• HTML तत्वों का चयन और मैनिपुलेशन

तत्व चयन तकनीक

• ID से चयन: getElementById
• क्लास से चयन: getElementsByClassName
• टैग से चयन: getElementsByTagName
• क्वेरी सेलेक्टर:
  • querySelector: पहला मेल खाने वाला तत्व चुनता है
  • querySelectorAll: सभी मेल खाने वाले तत्व चुनता है

तत्वों को मैनिपुलेट करना

• स्टाइलिंग:
  • element.style.property का उपयोग कर किसी तत्व की स्टाइल बदलना
  • CSS में उपयोग किए जाने वाले सेलेक्टर्स को यहां भी लागू किया जा सकता है
• कंटेंट मैनिपुलेशन:
  • innerHTML, textContent, innerText
  • getAttribute और setAttribute का उपयोग कर एट्रीब्यूट को पढ़ना और सेट करना

नोड लिस्ट और HTML कलेक्शन

• नोड लिस्ट:
  • querySelectorAll के माध्यम से प्राप्त
  • यह एक एरे नहीं है लेकिन forEach का उपयोग किया जा सकता है
• HTML कलेक्शन:
  • getElementsByClassName और getElementsByTagName के माध्यम से प्राप्त
  • इसे एरे में बदलकर Array.from() का उपयोग कर सकते हैं

प्रैक्टिकल उदाहरण

• लूप और चयन:
  • forEach लूप का उपयोग कर सभी चयनित तत्वों पर स्टाइलिंग लागू करना
  • तत्व के textContent को बदलना

उपयोगिता

• DOM तत्वों के मैनिपुलेशन से जावास्क्रिप्ट की इफेक्टिव उपयोगिता
• कोडिंग के अंदर कैसे स्क्रिप्टिंग टैग के माध्यम से DOM को मैनिपुलेट करना

निचोड़

• DOM का उपयोग सरल और प्रभावी है जब सही तकनीकें अपनाई जाती हैं
• DOM मैनिपुलेशन का अंतिम उद्देश्य विजुअल इंटरफेस की डायनामिक इंटरैक्शन में सुधार करना है

अगला कदम

• प्रोजेक्ट्स में इन सीखी गई तकनीकों का उपयोग
• DOM के साथ और गहराई में जाकर अभ्यास