क्या आप जानते हैं कि हम वेब पेज पर सामग्री में हेरफेर करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं? दिलचस्प लगता है? आइए समझते हैं कि डॉक्यूमेंट ऑब्जेक्ट मॉडल क्या है। निम्नलिखित तरीके से जावास्क्रिप्ट में DOM:
- जावास्क्रिप्ट में DOM क्या है?
- जावास्क्रिप्ट में DOM के कार्य
- डोम को छोड़कर
- घटनाक्रम सुनकर
- रूपों के साथ बातचीत
- HTML तत्वों का निर्माण
- सीएसएस जोड़ना
जावास्क्रिप्ट में DOM क्या है?
वेब पेज लोड होने पर दस्तावेज़ ऑब्जेक्ट मॉडल या DOM ब्राउज़र द्वारा बनाया जाता है। चित्रमय रूप में, इसके तत्वों के एक पेड़ की तरह, इसे नोड्स भी कहा जाता है, जिसका उपयोग पृष्ठ पर हर एक तत्व का प्रतिनिधित्व करने के लिए किया जाता है।
हमारे वेबपेज का सारा DOM डॉक्यूमेंट ऑब्जेक्ट के अंदर बैठता है। प्रोग्रामेटिक रूप से, यह मॉडल हमें पढ़ने या यहां तक कि हमारे पेज की सामग्री को बदलने की अनुमति देता है । क्या यह अच्छा नहीं है?
जावास्क्रिप्ट में DOM के कार्य
कुछ क्रियाएँ जो हम इस मॉडल के साथ कर सकते हैं वे हैं:
DOM में / पृष्ठ पर HTML तत्वों को बदलें / निकालें।
सीएसएस शैलियों को तत्वों में बदलें और जोड़ें
शुरुआती पीडीएफ मुफ्त डाउनलोड के लिए सूचनात्मक ट्यूटोरियल
विशेषताएँ पढ़ें और बदलें (href, src, alt), आदि।
नए तत्व बनाएं और उन्हें DOM / पेज में डालें।
ईवेंट श्रोताओं को तत्वों से संलग्न करें (क्लिक करें, कीप, सबमिट करें)
जावास्क्रिप्ट में डोम को छोड़कर
एक HTML तत्व को हथियाने या जोड़ने / बदलने या सामग्री को पकड़ने के लिए इसे क्वेरी कहा जाता है।
HTML कोड:
विज़ुअल स्टूडियो का उपयोग करना सीखें
जावास्क्रिप्ट और DOM h1 {font-size: 60px}
जावास्क्रिप्ट कोड:
var title = document.getElementById () title ’) // cgangin color to red title.style.color = col red’ var body = document.getElementById ('body ’) // बैकग्राउंड कलर को लाइट ब्लू बॉडी.स्टाइल में बदलना। बैकग्राउंडर = 'लाइटब्लू'
हमने जावास्क्रिप्ट का उपयोग करके शीर्षक के पाठ का रंग काले से लाल कर दिया है। हमने इसे हासिल कर लिया ।अंदाज संपत्ति ने फिर मूल्य बदल दिया रंग के बराबर है जाल ।
अब शरीर के तत्व की पृष्ठभूमि का रंग बदल दें हल्का नीला ।
कैसे ai cli तक पहुँचने के लिए
इसके साथ, हम जावास्क्रिप्ट लेख में इस DOM के अंत में आते हैं। मुझे आशा है कि आपको यह समझ में आया होगा कि डॉक्यूमेंट ऑब्जेक्ट मॉडल कैसे काम करते हैं और जावास्क्रिप्ट में उसी DOM को कैसे लागू करते हैं।
अब जब आप जावास्क्रिप्ट में DOM के बारे में जानते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'जावास्क्रिप्ट में डोम' के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।