हाय कोडर्स एंड वेलकम टू द कंप्लीट जावास्क्रिप्ट सीरीज जिसके अंदर हम कॉन्सेप्ट्स को पढ़ रहे हैं उससे रिलेटेड प्रैक्टिस क्वेश्चंस को कर रहे हैं और बाद में जाकर इन्हीं कॉन्सेप्ट्स को कुछ प्रोजेक्ट्स के अंदर अप्लाई करेंगे अब आज है हमारा चैप्टर सिक्स जिसके अंदर हम पढ़ने वाले हैं एक बहुत ही इंपॉर्टेंट कांसेप्ट व्हिच इज कॉल्ड डोम डॉक्यूमेंट ऑब्जेक्ट मॉडल क्या होता है डॉम इसको हम कैसे यूज़ कर सकते हैं किस काम आता है किस तरीके से जनरेट होता है सारी की सारी चीजों के बारे में इस लेक्चर के अंदर हम कवर कर रहे होंगे और इसके साथ-साथ इसके अलावा आपको किसी भी जावास्क्रिप्ट कांसेप्ट के बारे में सीखना हो तो हम हमारे सारे के सारे टॉपिक्स इसी चैनल के ऊपर इस प्लेलिस्ट के अंदर अवेलेबल है तो हम किसी भी टॉपिक को जाकर एक्सेस कर सकते हैं हमारे जो स्लाइड्स नोट्स है वो नीचे आपको डिस्क्रिप्शन बॉक्स के अंदर मिल जाएंगे वहां से जाकर आप एक्सेस कर सकते हैं तो शुरुआत करते हैं अपने चैप्टर सिक्स के साथ अब नेक्स्ट हम डॉम मैनिपुलेशन के अंदर पढ़ने वाले हैं अपने एट्रबीक होता है फॉर एग्जांपल वी हैव अ टैग कॉल्ड डिव डिव एलिमेंट हमने बनाया आया दिस इज अ डिव इसे सेव कर लेंगे एंड यह हमारे पास ब्राउजर के ऊपर हमारा डिव आ गया अब इस डिव के अंदर कई सारे एट्रियो हो सकते हैं एटिबल को पहले भी मैंने बताया था हमारे एलिमेंट्स के अंदर जो हम एडिशनल इंफॉर्मेशन देते हैं दैट इज इन द फॉर्म ऑफ एटिबल जैसे इसे हम एक आईडी एटिबल दे सकते हैं इसको मैंने आईडी दे दी बॉक्स तो ये क्या बन गया ये इसका एट्रिया यानी रिलेटेड इंफॉर्मेशन बन गई तो रिफ्रेश करेंगे यह आईडी एज सच हमें दिखेगी नहीं पर एलिमेंट्स के अंदर जाएंगे डिव के अंदर तो यहां मुझे दिख रहा है आईडी इसके पास है बॉक्स तो इस तरीके से कई सारे डिफरेंट डिफरेंट एटिबल होते हैं हमारे मल्टीपल टैग्स के पास अगर हमारे पास कोई इमेज टैग है तो इमेज टैग के अंदर भी हमारे पास सोर्स एट्रिल होता है जिसमें हम अपनी इमेज का लिंक देते हैं अभी एज सच हम कोई लिंक पेस्ट नहीं करेंगे तो इस तरीके का हमारे पास एरर आ जाएगा कि हमने कोई लिंक नहीं दिया इमेज के लिए तो ये कंसोल विंडो के अंदर भी आ रहा है बट बेसिकली ये जो सोर्स है ये क्या बन गया ये एक एट्रिल बन गया जैसे अगर हम बात करें अपने किसी पैराग्राफ टैग के लिए तो पैराग्राफ टैग को मैंने क्लास दे दी पैराग्राफ और यहां दिस इज अ सिंपल लाइन इस तरीके का मैंने कुछ पैराग्राफ लिख दिया रिफ्रेश किया तो ये क्या आ गया पैराग्राफ के अंदर क्लास जो है ये एक एट्रिल है और इसकी वैल्यू है पैराग्राफ तो अगर मुझे एट्रिल को गेट करना होता है तो उसके लिए मेरा जो नोड होता है नोड का मतलब क्या है कि अगर मेरे पास डिव है तो डिव वाला जो भी नोड होता है हमारे डॉम के अंदर इस नोड के अंदर मेरे पास एक स्पेशल मेथड होता है कॉल्ड गेट एटिबल अगर मुझे किसी भी डिव के लिए उसके एट्रिल को गेट करना है तो मैं उस नोड के लिए गेट ट्रिब्यूट को कॉल कर सकती हूं और उसके अंदर जिस भी एट्रिल चाहिए उस एट्रिमेद करते हैं सबसे पहले तो इस डिव को एक्सेस करेंगे स्क्रिप्ट जए के अंदर लेट डिव इज इक्वल टू डॉक्यूमेंट ड क्वेरी सिलेक्टर हम सबको पता है क्वेरी सिलेक्टर कैसे काम करता है हमें अपने डिव को एक्सेस करना है तो कसोल डलॉग किया अपना डिव सेव रिफ्रेश कंसोल ये हमारे पास हमारा डेव आ गया अब इस डेव के लिए मुझे क्या करना है इस डेव के लिए मुझे करना है है गेट एट्रिल और गेट एट्रिल मेथड के अंदर हमें आईडी एट्रिल चाहिए फॉर एग्जांपल और इसी वैल्यू को हम यहां लिख सकते हैं लेट वैल्यू या लेट आईडी इज इक्वल टू और फिर हम कसोल डलॉग करवा सकते हैं अपनी आईडी को सेव कर लिया रिफ्रेश कर लिया ये हमारे पास क्या आ गई हमारी आईडी की वैल्यू आ गई व्हिच इज इक्वल टू बॉक्स क्योंकि इसे हमने क्या आईडी दी थी इसे हमने बॉक्स आईडी दी थी इसी तरीके से हम और भी एटिबल की वैल्यू है जिसको एक्सेस कर सकते हैं फॉर एग्जांपल यहां पर मैंने इसको कोई नेम एटिबल दे मैंने खुद से इसको कोई नेम एट्रबीक का मैंने इसे कोई नेम एटिबल दे दिया तो स्क्रिप्ट ड जस के अंदर अब हम अपने नेम एटिबल को यहां से एक्सेस कर सकते हैं तो हमारे नेम की वैल्यू क्या हो जाएगी उसे हम यहां पर प्रिंट करवा देंगे सेव किया रिफ्रेश किया सो दिस इज माय नेम एटिबल वैल्यू जेएस डिव इसी तरीके से हम चाहे तो अपने पैराग्राफ से उसके क्लास के नाम को भी एक्सेस कर सकते हैं यहां पर लेट पैरा इज इक्वल टू डॉक्यूमेंट डॉट क्वेरी सिलेक्टर हमारा पैराग्राफ और फिर हम कसोल डलॉग करवा सकते हैं p डॉट गेट एट्रिक्स का हमने नाम प्रिंट करवा दिया सेव किया रिफ्रेश किया p इज नॉट डिफाइंड ओके दिस इज सपोज्ड टू बी पैरा सेव रिफ्रेश तो हमारी क्लास का नाम हमारे पास था पैरा यही सेम नाम हमने अपनी क्लास को दिया था जो हमारे लिए यहां पर प्रिंट होकर आ गया तो ये तो है एट्रिल की वैल्यू को गेट करने के लिए हमारे पास एक और मेथड होता है टू सेट द एट्रिल वैल्यू अगर हमें किसी भी एट्रिल की वैल्यू को चेंज करना है जैसे मुझे चेंज करना है एटिबल की वैल्यू को तो हम मेथड के अंदर अपना एट्रिल पास करेंगे और फिर नई वैल्यू पास करेंगे फॉर एग्जांपल ये जो पैराग्राफ है इसके लिए मैं चाहती हूं इसकी क्लास का नाम चेंज हो जाए क्लास का नाम कहां दिखता है एलिमेंट्स के अंदर पैराग्राफ में अभी ये क्लास का नाम मुझे पैरा दिखाई दे रहा है पर मैं चाहती हूं ये वैल्यू चेंज हो जाए तो उसके लिए आई कैन डू सेट एट्रियो फॉर पैरा और क्लास का नाम मुझे चेंज करना है टू न्यू क्लास यह बनाना है मुझे क्लास का नाम सेव करेंगे रिफ्रेश करेंगे अब मेरे पैराग्राफ की क्लास का नाम क्या हो गया न्यू क्लास हो गया हम जाए तो डायनेमिक यहां पर भी कर सकते हैं आई कैन डू पैरा डॉट सेट एटिबल और उसके अंदर मुझे अब अपनी क्लास का नाम चेंज करके करना है 1 2 3 नी क्लास का नाम 1 2 3 होना चाहिए एंटर किया यहां एज सच चेंज नहीं दिख रहा पर जैसे ही एलिमेंट्स में जाएंगे यहां पे ऑटोमेटिक चेंज हो गया इट चेंज टू 1 2 3 तो इस तरीके से हम किसी भी एट्रिक्स भी एलिमेंट के लिए चेंज कर सकते हैं अब एक स्पेशल एट्रिल हमारे पास होता है व्हिच इज फॉर स्टाइल स्टाइल को एज सच एट्रिक्स कर सकते हैं पर जनरली हम स्टाइल को कैसे एक्सेस करते हैं किसी भी एलिमेंट का अगर हमें स्टाइल की वैल्यू चेंज करनी हो तो हम लिखते हैं अपने नोड की वैल्यू डॉट स्टाइल उससे किसी भी नोड का हमारे पास स्टाइल आ जाता है फॉर एग्जांपल यहां पर यह पार्ट हटा लेते हैं सेव इक्सड बॉक्स को अब हम कुछ स्टाइल दे सकते हैं स्टाइल ड सीएसएस के अंदर हमारे पास आईडी थी बॉक्स और इसको कुछ स्टाइल दे देते हैं हाइट इसे दे देते हैं 100 पिक्सल्स विड्थ इसे दे देते हैं 100 पिक्सल्स एंड साथ के साथ इसे बैकग्राउंड कलर हम दे सकते हैं लेट्स गिव इट अ बैकग्राउंड कलर ऑफ डॉजर ब्लू सेव रिफ्रेश यह क्या हो गया यह हमारा डिव हो गया हम इस डिव को चाहे तो और थोड़ा सा बेटर कलर देने के लिए लेट्स गिव इट अ टेक्स्ट कलर ऑफ वाइट रिफ्रेश हमारे पास वाइट कलर आ गया हम चाहें तो इसे एक बॉर्डर दे सकते हैं वन पिक्सल सॉलिड ब्लैक सेव रिफ्रेश तो कुछ-कुछ स्टाइलिंग हमारे पास आ गई इस डिव के लिए अब मुझे अगर इस डिव की जो स्टाइलिंग है उसको एक्सेस करना है जावास्क्रिप्ट के अंदर तो सबसे पहले तो हम डिव को एक्सेस करेंगे लेट डिव इज इक्वल टू डॉक्यूमेंट डॉ क्वेरी सिलेक्टर और हमने अपने ने डिव को एक्सेस कर लिया अब जब डिव को प्रिंट करवाएंगे तो पूरा का पूरा बॉक्स हमारे पास आ जाएगा और हम प्रिंट करवा सकते हैं ड स्टाइल तो क्या होगा एक ऑब्जेक्ट हमारे पास आएगी जिसमें सारी की सारी स्टाइलिंग होगी इस डिव की एंड इसके अंदर मैक्सिमम चीजें अभी खाली हैं क्योंकि ज्यादा स्टाइलिंग हमने दी नहीं है तो ये हमारी एक इनलाइन स्टाइल की ऑब्जेक्ट हमारे पास आ जाएगी जो सारा का सारा इनलाइन स्टाइल हमें दिखाती है इनलाइन स्टाइल वो स्टाइल होता है जो डायरेक्टली हम अपने टैग्स के अंदर लिखते हैं फॉर एग्जांपल टैग के अंदर ही मैंने अपने लिए स्टाइल लिखा बैकग्राउंड कलर मुझे देना है रेड अपने बॉक्स को तो इनलाइन स्टाइल की हाईएस्ट प्रायोरिटी होती है इसीलिए इसको कभी यूज नहीं करना मैं आपको सिर्फ दिखाने के लिए यूज़ कर रही हूं रिफ्रेश किया बैकग्राउंड कलर हमारे पास रेड आ जाएगा ये इनलाइन स्टाइल मुझे यहां भी दिखाई दे रहा है माय बैकग्राउंड कलर इज इक्वल टू रेड पर जैसे ही कंसोल के अंदर अपने डिव को प्रिंट करवाएंगे और डॉट स्टाइल को प्रिंट करवाएंगे तो डॉट स्टाइल में अगर आप जाओगे बैकग्राउंड कलर पर जाओगे तो बैकग्राउंड कलर के अंदर मुझे दिख रहा है बैकग्राउंड कलर इज इक्वल टू रेड तो ये जो वैल्यू थी स्टाइल की यह मेरे जावास्क्रिप्ट कोड के अंदर एक्सेसिबल है और इस स्टाइल की वैल्यू को हम यहां से चेंज भी कर सकते हैं इफ आई वांट रिफ्रेश कर लेते हैं ओरिजिनल पे आ जाते हैं मुझे स्टाइल के अंदर कलर को चेंज करना है तो आई कैन सिंपली डू . स्टाइल ड बैकग्राउंड कलर हम लिख सकते हैं ऑल दो आपको वीएस कोड सजेस्ट भी कर देगा नहीं तो बैकग्राउंड कलर के लिए ये होता है जो भी प्रॉपर्टी का नाम सीएसएस में होता है ना उसी प्रॉपर्टी को बस हम अपने कैमल केस में कन्वर्ट कर देते हैं जैसे अगर प्रॉपर्टी का नाम होगा कलर तो वो जावा स्क्रिप्ट के अंदर आके रहेगा कलर अगर प्रॉपर्टी का नाम है बैकग्राउंड कलर यह सीएसएस के अंदर अगर हम उसे बैकग्राउंड कलर लिखते हैं तो जावास्क्रिप्ट के अंदर वो हो जाएगा बैकग्राउंड और बिना हाईफिन के कलर और यह सेकंड लेटर कैपिटल हो जाएगा अगर प्रॉपर्टी का नाम है टेक्स्ट या प्रॉपर्टी का नाम है लेट्स सपोज फॉन्ट साइज यह है सीएसएस जिंदगी यह है जावास्क्रिप्ट जिंदगी यहां हो जाएगा यह फॉन्ट साइज इस तरीके से कन्वर्ट हो जाता है तो बैकग्राउंड कलर वी कैन सेट द बैकग्राउंड कलर टू बी यहां पर डबल कोट्स के अंदर वैल्यू लिखनी होते है कि हमें ग्रीन करना है सेव किया रिफ्रेश किया तो मैंने क्या किया जावास्क्रिप्ट कोड से ही मैंने अपना बैकग्राउंड कलर चेंज कर दिया अब कल को जाके अगर इस ग्रीन की जगह आई वांट टू मेक इट पर्पल तो इसको चेंज करके हम पर्पल भी कर सकते हैं रिफ्रेश किया यह पर्पल हो गया अगर हम चाहते हैं फंट के साथ मुझे कुछ चेंजेज करने हैं तो आई कैन सिंपली राइट ड स्टाइल ड फंट साइज को अगर हम बड़ा बनाना चाहते हैं लेट्स मेक इट लार्जर लेट्स मेक इट अ 26 पिक्सल्स फॉन्ट इसे कर लेते हैं सेव किया रिफ्रेश किया तो ये क्या हो गया मेरे फॉन्ट का साइज बड़ा हो गया हम चाहे कि मुझे इसकी वैल्यू चेंज करनी है वैल्यू चेंज करना तो हमें ऑलरेडी आता है कि हम अपने इनर टेक्स्ट को सेट कर देते हैं टू हेलो सेव किया रिफ्रेश किया तो इस तरीके से बहुत सारी अब प्रॉपर्टीज हैं स्टाइल हो गया एट्रिक्स हो गया कलर हो गया बहुत सारी चीजें हैं कलर स्लाइड का ही पार्ट है पर व सारा का सारा अब जावास्क्रिप्ट से चेंज कर पाना पॉसिबल है हम चाहे तो एक और इंटरेस्टिंग चीज कर सकते हैं हमने पढ़ा था विजिबिलिटी हिडन के बारे में तो डिव के अंदर स्टाइल के अंदर जाके मेरी जो विजिबिलिटी प्रॉपर्टी है उसको अगर मैंने सेट कर दिया टू हिडन तो क्या होगा मेरा एलिमेंट गायब हो जाएगा स्क्रीन से रिफ्रेश किया एलिमेंट गायब हो गया तो इस तरीके से आप चाहो तो जावास्क्रिप्ट के अंदर बैठे-बैठे बिना एचटीएमएल सीएसएस के अंदर चेंज किए हुए हम अपने एलिमेंट्स को स्क्रीन से गायब कर सकते हैं हाइड भी कर सकते हैं नेक्स्ट चीज जिसके बारे में प ने वाले हैं दैट इज हाउ कैन वी इंसर्ट एलिमेंट्स हमने बहुत सारी चीजें देख ली हमने देख ली स्क्रीन के ऊपर अगर कोई बटन है कोई पैराग्राफ है कोई हेडिंग है उसे एक्सेस कैसे करना है उसके अंदर चेंजेज कैसे करने हैं तो एक्सेस कैसे करना है चेंजेज कैसे करने हैं दो चीजें हमने पढ़ ली अब हम बात करेंगे कि नया अगर न्यू चीज न्यू एलिमेंट अगर हमें ऐड करना है तो किस तरीके से ऐड कर सकते हैं तो न्यू एलिमेंट पहले तो ऐड करने से पहले हमें क्रिएट करना पड़ेगा न्यू एलिमेंट को ऐड करने का जो प्रोसेस होता है इट इज अ टू स्टेप प्रोसेस पहले तो आप उस एलिमेंट को क्रिएट करो पैराग्राफ ऐड करना है तो पैराग्राफ को क्रिएट करो बटन ऐड करना है बटन को क्रिएट करो फिर उसे फाइनली हम ऐड करते हैं तो क्रिएट करने के लिए हम लिखते हैं डॉक्यूमेंट ड क्रिएट एलिमेंट और फिर जो भी हमें आइटम जिस तरीके का हमें एलिमेंट चाहिए उसका टैग नेम लिख देते हैं तो लेट्स सपोज हम एक बटन क्रिएट करना है तो उसके लिए हम एक नया एलिमेंट बना सकते हैं इसको कह सकते हैं न्यू बटन न्यू बीटीएन इ इक्वल टू डॉक्यूमेंट ड क्रिएट एलिमेंट और इसके अंदर हम टैग में पास कर देंगे अपना बटन तो इससे क्या होगा न्यू बीटीएन बन जाएगा एक बटन बन जाएगा रिफ्रेश करेंगे कोई चेंज नहीं आएगा एस सच बटन प्रिंट होके नहीं आएगा पर इसे चाहे तो हम प्रिंट करवा सकते हैं अपने न्यू बीटीएन को ये मेरा क्या बटन हो गया रिफ्रेश किया तो मेरे पास बटन आ गया अभी बटन के अंदर इसकी काफी सारी प्रॉपर्टीज खाली होंगी जैसे न्यू बीटीएन के अंदर मैं देखूं मेरे इनर टेक्स्ट की क्या वैल्यू होगी इट इज कंपलीटली एमटी तो इसको चाहे तो हम कुछ इनर टेक्स्ट दे सकते हैं न्यू बीटीएन डॉट इनर टेक्स्ट की वैल्यू को कर देते हैं लेट्स मेक इट क्लिक मी इस तरीके का कुछ टेक्स्ट हम दे सकते हैं सेव कर लेते हैं एंड इस बार हम न्यू इंपोर्टेंट वाले पढ़ रहे हैं सबसे पहला होता है अपेंड मेथड जिस भी एलिमेंट के हम लास्ट में इनसाइड एंड उसके लास्ट में अपेंड करना चाहते हैं तो उस नोड को हम पिक करते हैं और उसके लिए डॉट अपेंड करके अपने एलिमेंट को हम पास कर देते हैं इसका एग्जांपल आपको मैं दिखाती हूं फॉर एग्जांपल मेरे पास एक डिव है इस डिव के अंदर मैंने दिस इज अ डिव तो लिखा ही हुआ है साथ के साथ मैंने क्या किया इस डिव के अंदर मैंने एक अन ऑर्ड लिस्ट बना ली इसको कह देते हैं लिस्ट और इस इस लिस्ट के अंदर मेरे पास कई सारे आइटम्स हैं दिस इज माय आइटम वन इस तरीके से कॉपी किया यह आइटम टू आ गया यह आइटम थ्री आ गया सेव किया रिफ्रेश किया तो डिव की हम थोड़ी सी हाइट बढ़ा लेते हैं हाइट को वी कैन मेक इट 250 पिक्सल सेव रिफ्रेश सो दिस इज़ माय डिव ये मेरा डिव है ये लिस्ट है इसके अंदर आइटम्स है सारी चीजें मेरे पास प्रिंट होके आ रही है अब हम चाहते हैं कि इसी डिव के अंदर यह जो अन ऑर्डरलिज है इसके बाद में मेरा जो बटन है वो आ जाए तो उसके लिए क्या करना पड़ेगा मुझे उसे डिव के अंदर अपेंड करना पड़ेगा डिव के अंदर अपेंड करने का मतलब है ऐड एट द एंड ऑफ द नोड तो मुझे ये डिसाइड करना पड़ेगा मेरा जो पेज है उसके ऊपर कहां मुझे अपने बटन को ऐड करना है मैं अपने बटन को ऐड करना चाहती हूं डिव के अंदर और डिव के अंदर भी कहां पर या तो स्टार्टिंग में ऐड कर सकते हैं लास्ट में ऐड कर सकते हैं वो भी मुझे ऐड करना है एंडिंग में तो उसके लिए सबसे पहले तो मैं डिव को एक्सेस करूंगी लेट डिव इ इक्वल टू डॉक्यूमेंट डॉट क्वेरी सिलेक्टर हम अपने डिव को एक्सेस कर सकते हैं और डिव के अंदर हम अपेंड कर देंगे लास्ट में ऐड कर देंगे अपने न्यू बटन को तो इस तरीके से हम अपेंड करते हैं अपेंड कहां पे किया मतलब डिव के अंदर ही और लास्ट में ऐड कर दिया रिफ्रेश किया तो अब मेरा बटन मुझे दिखाई देना स्टार्ट हो गया ये मेरा बटन यहां पे आ गया कहां आया है डिव के अंदर आया है पर लास्ट में आया है उसी तरीके से मुझे डिव के अंदर ही चाहिए पर स्टार्टिंग में चाहिए तो उसके लिए हम प्रिपेंड को यूज करते हैं सो आई कैन डू डिव डॉट प्रिपेंड सेव रिफ्रेश तो यह क्या हुआ बटन स्टार्टिंग में आ गया पर डिव के अंदर आ गया अगर मुझे अपने एलिमेंट से पहले मुझे वोह नोड डिसाइड करनी पड़ेगी जिसके बेसिस पर हम अपने नए एलिमेंट को ऐड करते हैं तो वही नोड मेरे लिए अभी मेरा डिव है अगर मुझे किसी नोड से जस्ट पहले ऐड करना है उसके बाहर और जस्ट पहले तो उसके लिए हम बिफोर को यूज़ कर सकते हैं तो डिव डॉट बिफोर सेव किया रिफ्रेश किया तो डिव स्टार्ट होने से जस्ट पहले मेरा बटन आ गया और बाद में के लिए हम आफ्टर यूज़ करते हैं सेव किया रिफ्रेश किया तो तो बटन कहां आया डिव खत्म होने के जस्ट बाद मेरा बटन आ गया अगर मुझे इस पैराग्राफ के बाद उसे ऐड करना है इस पैराग्राफ के बाद अगर मैं ऐड करना चाहती हूं बटन को मैं यहां क्या करूंगी क्वेरी सिलेक्टर से अपने पैराग्राफ को एक्सेस करूंगी और पैराग्राफ के बाद मैं अपने बटन को ऐड करूंगी रिफ्रेश किया तो अब मेरा बटन पैराग्राफ के बाद ऐड होकर आ गया तो ये तो मैंने बटन को ऐड किया इसी तरीके से हम किसी हेडिंग को ऐड कर सकते हैं जैसे फॉर एग्जांपल मैंने एक नई हेडिंग एलिमेंट क्रिएट करते हैं लेट न्यू हेडिंग इज इक्वल टू टू डॉक्यूमेंट डॉट क्रिएट डॉट क्रिएट एलिमेंट और इसके अंदर मैंने एक h1 हेडिंग को क्रिएट किया h1 हेडिंग को कुछ इनर टेक्स्ट दे देते हैं इनर टेक्स्ट इज इक्वल टू या इनर एचटीएमएल ही दे देते हैं डायरेक्टली इसे इटैलिक बना देते हैं इटैलिक इसके अंदर आएगा हाई आई एम न्यू इस तरीके से कुछ टेक्स्ट आ जाएगा तो ये न्यू हेडिंग बन गई अब इस हेडिंग को मुझे कहां पर ऐड करना है टॉप पे ऐड करना है पेज के मैं क्या कर सकती हूं आई कैन डायरेक्टली सिलेक्ट डॉक्यूमेंट डॉ क्वेरी सिलेक्टर से मैं डायरेक्टली अपनी बॉडी को सिलेक्ट कर सकती हूं और मुझे टॉप पे ऐड करना है तो टॉप पे ऐड करने का मतलब होगा बॉडी के अंदर ऐड करो पर टॉप पे ऐड करो स्टार्टिंग में ऐड करो तो मैं बॉडी डॉट प्रिपेंड कर सकती हूं तो आई कैन डू डॉट प्रिपेंड यहीं पे ही मेथड को ये मैंने सेलेक्ट कर लिया बॉडी टैग को इसको सेव करवाने की बजाय यही लिख दिया डॉट प्रिपेंड और यहां अपने न्यू हेडिंग को मैंने पास कर दिया सेव किया रिफ्रेश किया ओके h1 इज नॉट डिफाइंड ओके यहां पे मेरे पास मेरी न्यू हेडिंग आएगा सेव किया रिफ्रेश किया अब क्या आ गई मेरे पास मेरी नई हेडिंग आ गई जिसको मैंने ऑटोमेटिक पेज के अंदर ऐड कर दिया इस हेडिंग को ऐड करने के लिए मैंने अपने एटीएमएल कोड को टच भी नहीं किया मेरी हेडिंग एटीएमएल कोड के अंदर नहीं है पर मैंने जावास्क्रिप्ट का लॉजिक लगाया और नई हेडिंग को क्रिएट किया उसके अंदर कुछ टेक्स्ट ऐड किया फिर बॉडी को सेलेक्ट किया और चेक किया कि बॉडी के अंदर कहां पे ऐड होनी चाहिए बॉडी को रेफरेंस लेके फिर उसे ऐड कर दिया तो इस तरीके से हम अपने नए एलिमेंट्स को ऐड कर सकते हैं इन आवर डोम अपने ट्री के अंदर ऐड कर सकते हैं अब जैसे हम एलिमेंट्स को इंसर्ट करते हैं वैसे ही हम एलिमेंट्स को डिलीट भी कर सकते हैं किसी भी नोड को डिलीट करने के लिए हम लिखते हैं उस नोड का नाम डॉट रिमूव तो वो नोड ऑटोमेटिक डिलीट हो जाती है जैसे लेट्स सपोज मुझे इस पैराग्राफ को डिलीट करना है इस पैराग्राफ को डिलीट करने से पहले मुझे इसे रेफर करना पड़ेगा एक्सेस करना पड़ेगा डॉक्यूमेंट डॉट क्वेरी सिलेक्टर पहले पैराग्राफ को एक्सेस कर लेंगे और सिंपली हम कर देंगे पैरा डॉट रिमूव सेव रिफ्रेश मेरा पैराग्राफ हो गया एलिमेंट्स के अंदर जाएंगे तो यहां भी बॉडी टैग के अंदर पैराग्राफ अब नहीं दिखेगा मुझे इस हेडिंग को गायब करना है आई कैन सिंपली डू न्यू हेडिंग डॉट रिमूव सेव रिफ्रेश गायब हो गया तो इस तरीके से किसी भी एलिमेंट को डिलीट एंड ऐड किया जा सकता है अपने पेज के अंदर अच्छा यहां मैं आपको छोटा सा एक होमवर्क प्रॉब्लम दूंगी छोटा सा प्रॉब्लम व्हाट यू हैव टू डू इज इन दो मेथड्स के बारे में जाकर पढ़ना है एमडीएन डॉक्यूमेंटेशन में एक होता है अपेंड चाइल्ड मैंने आपको बताया था अपें के लिए बहुत सारे मेथड होते हैं और वैसे ही होता है हमारे पास रिमूव चाइल्ड दोनों मेथड्स के बारे में आपको जाके पढ़ना है कि अपेंड चाइल्ड और रिमूव चाइल्ड का एग्जैक्ट यूसेज क्या होता है बाकी इन सारे मेथड्स को तो हम यूज कर ही सकते हैं अब नेक्स्ट हम सॉल्व करने वाले हैं अपने कुछ प्रैक्टिस क्वेश्चंस प्रैक्टिस क्वेश्चन में सबसे पहला क्वेश्चन हमें कह रहा है क्रिएट अ न्यू बटन एलिमेंट गिव इट अ टेक्स्ट क्लिक मी यह जो सारा का सारा काम है मुझे जावास्क्रिप्ट के अंदर करना है वाला जो कोड है उसे तो अभी खाली कर देते हैं लेट्स मेक द स्क्रीन एमटी लेट्स मेक द पेज एमटी तो रिफ्रेश किया ये हमारा पेज एमटी हो गया script.js को भी खाली कर लेते हैं रिफ्रेश किया एमटी हो गया अब शुरुआत से हमें यहां कोड लिखना है एक और चीज यहां पे पॉज करके एक बार खुद से चीजों को ट्राई करने की जरूर कोशिश करनी है क्योंकि खुद से एक बार ट्राई करेंगे अगर सॉल्व नहीं भी होता तो कोई बात नहीं अब सॉल्व ना होने के हम दो-चार तरीके सीख जाएंगे कि कौन-कौन सी अप्रोच तो वर्क नहीं करती या कहां पर हम ज्यादा स्टक होते हैं जहां पर ज्यादा स्टक फील होते है उस पार्ट को फिर जाकर हमें रिवाइज कर लेना है सबसे पहले हमें क्रिएट करना है एक न्यू बटन एलिमेंट तो किसी भी एलिमेंट को क्रिएट करने के लिए इसे न्यू बटन कह देते हैं हम न्यू बीटीएन क्रिएट करने के लिए हम लिखेंगे डॉक्यूमेंट डॉट क्रिएट एलिमेंट और इसे हम बनाएंगे टैग बटन इसके अंदर फिर मुझे एक टेक्स्ट लिखना है क्लिक मी तो न्यू बीटीएन डट इनर टेक्स्ट इज इक्वल टू क्लिक मी इस तरीके का कुछ टेक्स्ट लिख दिया हमने फिर हमें क्या करना है इसे एक बैकग्राउंड कलर देना है रेड एंड टेक्स्ट कलर देना है वाइट जब भी स्टाइल देना हो हमने ऑलरेडी पढ़ रखा है स्टाइल कैसे देना होता है हमें जिस भी नोड के अंदर स्टाइल देना है हम लिखते हैं नोड डॉट स्टाइल डॉट कलर या डॉट बैकग्राउंड कलर जिस भी प्रॉपर्टी को हमें चेंज करना है तो आई कैन सिंपली राइट न्यू बीटीएन न्यू बीटीएन क्या है मेरा नोड है डॉट स्टाइल डॉट कलर कलर हमें देना है इसे इक्वल टू वाइट एंड बैकग्राउंड कलर देना है रेड तो न्यू बटन डॉट स्टाइल डॉट बैकग्राउंड कलर इज इक्वल टू रेड यह हमने दे दिया इतना पार्ट कर दिया नेक्स्ट हमें इंसर्ट करना है द बटन एज द फर्स्ट एलिमेंट इनसाइड द बॉडी टैग बॉडी टैग के अंदर फर्स्ट एलिमेंट की तरह अटैच करना है तो पहले तो बॉडी ट को सिलेक्ट कर लेते हैं डॉट क्वेरी सिलेक्टर बॉडी और बॉडी के अंदर फर्स्ट एलिमेंट की तरह सिलेक्ट करना है तो मतलब हमें पता है बॉडी के अंदर आना चाहिए तो या तो अपेंड होगा या प्रिपेंड होगा और कहां पे आना चाहिए स्टार्टिंग में आना चाहिए तो हम इसे प्रिपेंड कर रहे होंगे प्रिपेंड प्री यानी पहले तो प्रिपेंड और यहां ऐड कर देंगे अपने न्यू बटन को इसे सेव कर लेते हैं एंड यहां जैसे ही रिफ्रेश करेंगे सबसे पहले हमारे पास एक रेड कलर का क्लिक मी नाम का बटन आ जाएगा ये जो बटन है ये हमारे एलिमेंट्स के अंदर भी हमें दिखाई देगा यहां पर पर तो डॉट स्टाइल से जितनी भी स्टाइलिंग होती है यह हमारी स्टाइल ड सीएसएस के अंदर ऐड नहीं होती यह इनलाइन स्टाइलिंग होती है जो उसी टैग के अंदर हमें दिखाई देती है तो एलिमेंट्स में जो भी स्टाइलिंग हमने ऐड करी जावास्क्रिप्ट से वो सारी की सारी यहां पर मुझे दिखाई दे रही है सो दिस इज हाउ वी क्रिएट एन एलिमेंट वी गिव इट सम टेक्स्ट वी गिव इट सम स्टाइलिंग एंड वी ड इट टू द डॉक्यूमेंट सेकंड क्वेश्चन की तरफ आ जाते हैं सेकंड क्वेश्चन में हम कुछ नया सीखेंगे क्लास के लेक्चर से आगे बढ़कर कुछ नया सीखेंगे तो थोड़ा सा टफ लग सकता है सबसे पहले क्रिएट अ पैराग्राफ टैग इन द एटीएल एंड गिव इट अ क्लास एंड सम स्टाइलिंग तो एचटीएमएल के अंदर एक पैराग्राफ टैग क्रिएट कर लेते हैं पैराग्राफ इसको कह देते हैं आई एम अ पैराग्राफ तो यह मेरा पैराग्राफ आ गया रिफ्रेश करेंगे दिखाई दे रहा है माय पैराग्राफ इस पैराग्राफ को हमें क्या करना है क्लास देनी है लेट्स गिव इट अ क्लास वी कैन गिव इट अ क्लास ऑफ माय क्लास दे देते हैं इसे नाम माय क्लास वेरी सिंपल नेम इट्स नॉट अ वेरी गुड नेम फॉर अ पैराग्राफ या इसे कंटेंट दे देते हैं कंटेंट थोड़ा सा लॉजिकल नाम होगा कंटेंट नाम दे देते हैं इसे क्लास को एंड फिर क्या करना है हमें इसे कुछ स्टाइलिंग देनी है तो यह अपनी पुरानी कोई स्टाइलिंग थी इसे हम हटा लेते हैं डॉट कंटेंट इस तरीके से हम स्टाइलिंग देते हैं स्टाइल डॉ सीएसएस में ऑन द बेसिस ऑफ क्लास नेम तो यहां पैराग्राफ को एक कलर दे देते हैं लेट्स गिव इट अ कलर ऑफ रेड रेड किया रिफ्रेश कर लिया ये रेड कलर आ गया मेरे पैराग्राफ का तोय हमने इसे कुछ स्टाइलिंग दे दी नेक्स्ट हमें क्या करना है क्रिएट अ न्यू क्लास इन सीएसएस एंड ट्राई टू अपेंड दिस क्लास टू द पैराग्राफ एलिमेंट मतलब मुझे सीएसएस के अंदर एक नई क्लास क्रिएट करनी है और फिर जावास्क्रिप्ट को यूज करके उस क्लास को मुझे इस पैराग्राफ एलिमेंट के अंदर ऐड करना है और अपेंड करने का मतलब है पुरानी क्लास तो रहनी चाहिए नई क्लास भी आ जानी चाहिए तो पहले तो सीएसएस के अंदर एक नई क्लास क्रिएट कर लेते हैं इसे कह देते हैं डॉट न्यू क्लास न्यू क्लास के अंदर नई स्टाइल दे देते हैं बैकग्राउंड कलर दे देते हैं लेट्स सपोज वी गे अ बैकग्राउंड कलर ऑफ येलो अ वेरी बैड कॉमिनेशन लेट्स गिव ग्रीन रेड एंड ग्रीन इज द कलर ऑफ क्रिसमस तो बैकग्राउंड कलर इसको दे देते हैं ग्रीन के इक्वल न्यू क्लास अब यह बैकग्राउंड कलर एस सच कहीं पर अप्लाई तो हो नहीं रहा बस क्लास बना दिया हमने सीएसएस के अंदर अब मुझे स्क्रिप्ट ड जस से क्या करना है सबसे पहले तो यहां नीचे आ सकते हैं क्वेश्चन टू मुझे इस पैराग्राफ को एक्सेस करना है और इसके अंदर क्लास के अंदर कंटेंट क्लास तो है ही एक और क्लास ऐड करनी है तो पहले तो पैराग्राफ को एक्सेस कर लेते हैं लेट पैरा इज इक्वल टू डॉक्यूमेंट डॉट क्वेरी सिलेक्टर p अब देखा जाए तो क्लास को ऐड करने के लिए हम क्या कर सकते हैं किसी भी टैग की अगर मुझे क्लास एक्सेस करनी है क्लास क्या होता है क्लास हमारे पास एक एट्रिल को एक्सेस करने के लिए हम सिंपली सेव कर लेते हैं एक बार रिफ्रेश करते हैं पैरा को प्रिंट करवाऊं मेरा पैराग्राफ आ जाएगा और हम कर सकते हैं डॉट गेट एट्रबीक डॉट गेट एट्रबीक क्लास की वैल्यू कंटेंट है हम ऐसे ही सेट एट्रियल डू सेट एट्रिक्स का नाम मैं चेंज करवा सकती हूं टू न्यू कंटेंट या न्यू क्लास न्यू क्लास था हमारी क्लास का नाम क्लास का नाम मैंने चेंज कर दिया जैसे ही एंटर किया वैसे ही क्या हुआ वैसे ही वो क्लास अप्लाई हो गई इस एलिमेंट के ऊपर और न्यू क्लास के पास क्योंकि बैकग्राउंड कलर ग्रीन था वो ग्रीन कलर अप्लाई हो गया पर एक चीज आप नोटिस करोगे टेक्स्ट कलर वापस से ब्लैक हो गया तो पुरानी जो क्लास थी वो हट गई पुरानी क्लास जैसे ही हट जाती है उसकी पुरानी स्टाइलिंग भी हट जाती है पर मैं नहीं चाहती कि मेरी पुरानी स्टाइलिंग हटे मैं चाहती हूं दो क्लासेस मिले इस एलिमेंट को तो इसीलिए मेरी जो सेट एटिबल वाली प्रॉपर्टी है वो तो क्लास को कंप्लीट ओवरराइट कर देती है कंप्लीट चेंज कर देती है तो यहां पर क्लास का नाम ऐड करने के लिए अपेंड करने के लिए हम कभी भी सेट एट्रिल को यूज नहीं करते उसके लिए वी यूज समथिंग कॉल्ड क्लास लिस्ट तो यही लिखा हुआ है क्वेश्चन के अंदर डिड यू नोटिस हाउ यू ओवरराइट द क्लास नेम व्हेन यू ऐड अ न्यू वन तो जब नई क्लास ऐड करते हैं पुरानी वाली कंप्लीट चेंज हो जाती है सॉल्व दिस प्रॉब्लम यूजिंग क्लास लिस्ट वी यूज समथिंग कॉल्ड क्लास लिस्ट और यहां मैं आपको यह भी दिखा रही हूं कि कभी-कभार मान लो हमारे पास ऐसी प्रॉब्लम आ जाती है जिसको मुझे पता नहीं कैसे सॉल्व करना है जिसके बारे में कभी पढ़ा नहीं तो उसको सिंपली हम ग करके सॉल्व कर सकते हैं मैं क्या करूंगी मुझे नहीं पता क्लास लिस्ट क्या है तो आई कैन सिंपली सर्च फॉर क्लास लिस्ट इन जावास्क्रिप्ट और बेस्ट तरीका है एमडीएन के ऊपर जाओ नहीं तो यहां दिखाई भी दे रहा है क्लास लिस्ट प्रॉपर्टी इन एलिमेंट तो क्लास लिस्ट प्रॉपर्टी क्या होती है इट इज अ कलेक्शन ऑफ क्लास एटिबल ऑफ द एलिमेंट क्लास लिस्ट के अंदर हमारे पास सारे एलिमेंट के क्लासेस की लिस्ट आ जाती है तो अपने कोड के अंदर हमारा जो पैरा है पैराग्राफ के लिए हम उसकी क्लास लिस्ट को प्रिंट करवा सकते हैं पैराग्राफ के लिए क्लास लिस्ट प्रिंट होके आ जाएगी क्लास लिस्ट के अंदर लेंथ है वन और कितनी क्लासेस हैं एक ही क्लास है इंडेक्स नंबर रो पे इस क्लास का का नाम है कंटेंट तो इस तरीके से क्लास लिस्ट को एक्सेस कर लिया यहां पे मुझे दिखाया भी हुआ है अब क्लास लिस्ट के अंदर नई क्लास ऐड करने के लिए हम लिखते हैं क्लासलिस्ट ड ऐड और फिर अपनी नई क्लास का नाम रिमूव करने के लिए लिखते हैं क्लासलिस्ट ड रिमूव यहां तो क्या कर रहे हैं डेव के अंदर नई क्लासलिस्ट ऐड करने की कोशिश कर रहे हैं दिस इज द कोड एंड यहां पे रिमूव करने की कोशिश कर रहे हैं तो इसी तरीके से क्लास लिस्ट के अलग-अलग मेथड्स होते हैं ऐड और रिमूव सबसे इंपॉर्टेंट होते हैं अब जैसे ही रिफ्रेश कर लेते हैं पैराग्राफ के अंदर वो टाइप कैन डू इज अपनी क्लास लिस्ट के अंदर क्लासलिस्ट डॉट ड मेथड हम कॉल कर सकते हैं और इसके अंदर जैसे ही हम ऐड कर देंगे न्यू क्लास एंटर किया वैसे ही हमारी नई क्लास ऐड हो गई तो हमारा बैकग्राउंड कलर ग्रीन हो गया साथ के साथ पुरानी क्लास भी है तो हमारा जो कलर है फॉन्ट का वो तो रेड का रेड रहा अब जैसे ही हम पैराग्राफ ड क्लास को प्रिंट करेंगे क्लास लिस्ट को इस बार हमारे पास लेंथ आएगी टू और हमें पता चल रहा है पैराग्राफ के अंदर दो क्लासेस हैं एक क्लास है कंटेंट एक क्लास है न्यू क्लास एलिमेंट्स में जाएंगे तो ये दोनों क्लासेस मुझे दिखाई देंगी पैराग्राफ में एक है मेरे पास कंटेंट एक है मेरे पास न्यू क्लास और इनकी स्टाइलिंग भी हम दे सकते हैं न्यू क्लास मुझे बैकग्राउंड कलर ग्रीन दे रही है और यहां पर कंटेंट क्लास मुझे फॉन्ट कलर रेड दे रही है तो इस तरीके से हम अपनी क्लासेस को ऐड कर सकते हैं अपेंड कर सकते हैं चाहे तो रिमूव भी कर सकते हैं मुझे अगर न्यू क्लास को रिमूव करना है आई कैन सिंपली राइट रिमूव न्यू क्लास एंटर किया तो मेरी न्यू क्लास रिमूव हो गई तो उसकी स्टाइलिंग भी रिमूव होगी एंड जनरली जब भी एलिमेंट्स को हमें मल्टीपल तरीके से डायनेमिक स्टाइलिंग देनी होती है इसी तरीके से हम क्लासेस की फॉर्म में उसे देते हैं तो आई होप कि डॉम के अंदर और नई-नई चीजें पढ़ने में हमें मजा आया होगा एंड नेक्स्ट चैप्टर के अंदर हम स्टार्ट करेंगे विद इवेंट्स बेसिकली बटन के क्लिक होने से अगर हम चाहते हैं कुछ प्रिंट होके आ जाए हमारी स्क्रीन पे हमारा कलर चेंज हो जाए या फॉर्म सबमिट करने से कुछ हो जाए तो इस तरीके के कामों के लिए हम अपने इवेंट्स को यूज़ करते हैं तो आई होप कि आज के लेक्चर के अंदर हमें खूब सारा मजा आया होगा आज के लिए इतना ही मिलते हैं नेक्स्ट लेक्चर के अंदर टिल देन कीप लर्निंग एंड कीप कोडिंग