हाँ जी कैसे हैं आप सभी स्वागत है आपका चाय और कोड में और सबसे पहली बात तो यह कि आप लोगों के कई मैसेजेस डीएम आपने जो लिंगडिन पर शेयर करा वह सब मिला मुझे लास्ट जो आपने डॉम वाले वीडियो को जो प्रेम बट ये सर्फ स्टार्ट है, आगे जाके हम जावास्क्रिप्ट से जो उसका इनर वर्किंग देखेंगे, और इतना जो हमने सर्फ डीप में पढ़ा है जावास्क्रिप्ट, इससे आपको खुद को रियलाइज होगा कि अब हम कभी लूप पे बात नहीं कर रहे हैं, फटाक स है तो चलिए फर्स्ट ऑफ थैंक यू सो मच और अब हम चलते हैं वापस हमारे डॉम के ऊपर थोड़ी और चर्चा करेंगे डॉम को इनडेप्ट देखेंगे कैसे किया जाता है कैसे का काम विदेखिए चाय और कोड पर आप आए हैं तो चाय के और उसको मैंने यहाँ पर Dom Learning on Chai और Code दे दिया है, एक paragraph है जिसके अंदर कुछ Lorem Ipsum का text मैंने दे दिया है, ठीक है, यह हमारा पास है, अभी तक basic की किस तरह से काम होता है, इसके लावा हम Wikipedia के page पे भी जाएंगे, वो तो obvious बात है, जाना ही, क्योंकि काफी कुछ testing वगरा तो लेकिन हम क्या चाहते हैं, विकीपीडिया पर प्राक्टिस करेंगे, लेकिन थोड़ी प्राक्टिस हम अपने हिसाब से हमारे अपने पेज पे भी तो करेंगे, तो इस वीडियो के नार हम थोड़ा से देखेंगे कि और भी elements को कैसे हम पकड़ सकते हैं, उनको कैसे manipulate कर सकते है है तो यह हम बेसिक करेंगे अब क्या हमने क्लास तो यहां पर हेडिंग दे दिए एक आईडी भी दे देते हैं यहां पर उस आईडी का नाम रखते हैं क्या रखें टाइटल रख लेते हैं ठीक है आपका जो मन करें आप नाम रख लीजिए यह हमने तो अवस्य बात है आपके आंखे तो मैं खराब करूँगा नहीं तो यहाँ पर स्टाइल टैक देकर और एक क्लास हम टारगेट कर लेते हैं बीजी डाश ब्लैक और यहाँ पर हम बैगराउंड कलर देते हैं बीजी ब्लैक ठीक है बीजी डाश ब्लैक और बैगराउंड कलर ह हम क्या करते हैं, इसको इस div से हटा के, इस class को पूरी body पे ही लगा जाते हैं, ताकि पूरी body हमारे पास आखों पे problem नहीं होनी चाहिए, देखिए, सबसे important काम यह है, कि आखों को बचाना है, तो यह काम हमारा हो गया, ठीक है, अब हम क्या करते हैं, कि हमें इस element को select करना है, तो हम देख रहे हैं यहाँ पर टाइटल है और क्लास भी रखी है, हम दोनों तरह से टार्गेट कर सकते हैं, पहले एक बर हम ID से सीखते हैं, कि ID से कैसे करते हैं, उसके बद क्लास से भी सीख जाएंगे, ठीक है, तो सबसे पहले कॉनसोल के अंदर जाते हैं, और कॉनसोल के अ यह एलेमेंट आपको मिल गया है, getElementById, अब क्या होता है कि यहाँ पे तो easily select कर लेते हैं, लेकि जब इसको लिखते हैं तब बहुत सारी गड़बड हो जाते हैं, क्योंकि E capital है, B capital है और I capital है, तो please इसका ध्यान रखेगा, getElementById हमारे पास यह name है, और भी हमारे पास जैसे कौन सा ID वाला element select करूं तो हम select करते हैं suppose करिए हमने यहाँ पे इसको title दे रखा है तो आप simply क्या करिए दो strings के अंदर title पास कर दीजे ठीक है, तो अभी हमने title पास कर दिया, और यहाँ पे हमें वो element मिल गया है, ठीक है, कोई दिक्कत वाली बात नहीं है, कई बार multiple elements आते हैं, उस पे भी हम चर्चा करेंगे, लेकिन अभी इसके उपर देखते हैं, ठीक है, अब get element by id आपने select कर लिया है, तो आपको ये जो पू ID की value बता दो मुझे क्या है हाँ मैंने target ID से ही किया था get element by ID लेकिन मैं हो सकता है कि class से select कर रहा हूँ तो ये जो methods हैं ये आपके almost तक्रीबन same ही रहते हैं तो इस तरह से मैंने उसको बोला कि मुझे ID बताओ क्या हो अच्छा ID नहीं लेकिन अगर मैं उसको बोलता हूँ class name बताओ हाँ उसने class name बता दिये कई बार values का name अलग होता है हम हमेशा यहाँ पर क्लास ही लिखते हैं, लेकिन जब document आपको portray करता है, तो actually behind the scene, आपको दिखाएगा भी यहाँ पर elements में उसको class ही, लेकिन behind the scene जो document उसको समझ रहा है, वो class name समझता है, और ऐसे ही लिखा जाता है, इसलिए जब CSS, यह JavaScript में आप लिखते हैं, यह HTML, especially react के अंदर, जिसको JSX बोलते हैं, तो हम class नहीं लिखते हैं, class name लिखते हैं, पहली बात तो यह conflict करता है class name से, तो react जब पढ़ोगे तब यहाँ पे या वापिस से याद करोगे मेरे को कि हाँ इसलिए हम आपे class name लिखते हैं ठीक है अच्छा सिर्फ इतना ही नहीं है आप सिर्फ class name नहीं आप यहाँ से पूरे attributes निकाल सकते हो कि क्या और attributes है तो वहाँ पे get attribute आप लिख सकते हो और आप सहारे के सारे attributes दे सकते हो कि get attribute अच्छा get attribute कैसे काम करता है आपने enter किया तो देखिए आपको मिला क्या get attribute एक function है तो देखें get attribute में आपको उसको बताना पड़ेगा कि कौन सा वाला attribute आपको चाहिए या फिर कौन सा वाला attribute आपको चाहिए, तो देखें दोबारा से इसको run करते हैं, get attribute, अब इस get attribute के अंदर आपको बताना पड़ेगा कि मुझे कौन सा वाला attribute चाहिए, मुझे चाहिए attribute id, basic था ठीक है अच्छा इतना ही नहीं है आप इसके अंदर और attributes भी set कर सकते हैं set कर सकते हैं जैसे get attribute है वैसे set attribute भी होता है तो set attribute के अंदर क्या होता है कुछ भी नहीं हम basic इसको बोल लेते हैं कि get की जगे set करना है मुझे attribute अच्छा set attribute क्या करना है मुझे class set करना attribute class already है बट फिर भी मैं उसके उपर just for fun तो हमने इसको दिया test इसने बोला undefined ठीक है लेकिन अगर मैं element के अंदर जाके देखता हूँ, तो देखिए class के अंदर क्या सेट हो गया है, test सेट हो गया है, यह हमेशा overwrite करेगा, यह बात गौर से ध्यान देखिएगा, यहाँ पे जो मैंने दिया है, class यहाँ पे heading थी, और बोला कि class के अंदर test सेट कर दो, और उसको बोलते कि मुझे heading भी सेट करनी है, टेस्ट भी सेट हो गया है, हेडिंग भी सेट हो गया है, तो यह सबसे important एक बात है, जो कि कई लोग attributes सेट कर दे टाइम भूल जाते हैं, वो क्या करते हैं, previous जो attributes को overwrite कर देते हैं गलती से, आगे जाके हम projects करेंगे, वहाँ पर ऐसी mistakes होगी, आप भी करेंगे, मैं भी करूँ� है तो हम देख लेते हैं इसको कौन और बोलते हैं यह हमारा टाइटल है ठीक है जी तो हमारे पास अभी एक इजी एक्सेस के लिए टाइटल वेरिबल आ गया है जिसको मैं इजीली उससे वैल्यूज निकलवा सकता हूं ठीक है लेकिन अब इसके तो वैसे एक element होता है आपके पास style, तो ये लीजिए हमारे पास style एक element है, अब style के अंदर जब आप लिखते हैं तो कैसे लिखते हैं, सबसे पहले हम code में देखते हैं कि actually हम लिखते हैं कैसे हैं, तो code में हमें लिखना होता है यहाँ पर कभी भी styling, तो हम क्या करते हैं, कुछ तो exactly same syntax हमें वहाँ भी follow करना होता है तो यहाँ पे हम गए title.style अब कौन सी style आपको लगानी है जैसे suppose करें मुझे इसके उपर लगाना है background color तो यहाँ पे तो suggestion मिल जाता है बट कई बार code editor में suggestion नहीं मिलता है तो हम यहाँ पे लेते है background color यह लीजे तो background color क्या आपको set करना है, तो suppose करें मुझे background color set करना है वहाँ पे, तो color का आप नाम दे दीजे या फिर hex code value दे दीजे, मैं इसको दे देता हूँ, अभी suppose करें green, वैसे तो अच्छी बात नहीं है ऐसे colors देना, वो ठीक है, तो यह मैंने जैसे ही दिया, तो देखें by instant, हम दे अब कितनी पैड़िंग आपको देनी है वह बता दीजिए सिंगल को डबल को जो भी आपको लेना कोई प्रॉब्लम है नहीं है सब्सक्राइब मुझे तो 15 पिक्सल की पैड़िंग चाहिए लीजिए 15 पिक्सल की पैड़िंग आ गई तो इतना कुछ था ही नहीं यहां पर बॉडर रेडियस भी देता हूं तो आप समझ गए जितनी भी आपके पास वैल्यूज है बॉडर रेडियस और 5 पिक्सल का अभी देख रही है ये value आराम से, थोड़ा सा zoom करके भी आपको दिखा देता है, ये देखिए corner radius आपके थोड़े cover हो गए है, तो ये हो गया आपका basic, ठीक है, अभी मुझे लगता है सबी को समझ में आगे कि कैसे values को मुझे grab करना है, at least get element by id तो clear हो गया है कि आपको क्या क्य add किया जाता है ठीक है तो comments में लिख दीजेगा सभी तो देखे अभी हमारे पास ये title है basic तो ठीक है जी ये हमारे पास title है ठीक है title के अंदर हमने जो भी radius वगरा सब लगाया अब क्या है इस title से कई बार आपको values निकालने होती है हमने attributes देख लिया कैसे निकालते हैं class और id बट actually में content कि उसका content क्या है dom learning और chai और code ये हमारा content है देखते हैं एक बार करके तो सबसे पहले content निकालने के लिए आपके पास जो values है वो है text content ठीक है अब text content जैसे आप निकालते हैं तो आपको content मिल जाता है, ठीक है जी, अब इसके सासाथ आप देखेंगे कि सिर्फ text content नहीं, यहाँ पे दो तीन values और है, एक है आपको inner HTML, यह भी आपको exact same value दे रहा है, ठीक है जी, text content भी यह दे रहा है, अच्छा एक और है, सिर्फ इतना ही तो फिर अंतर क्या है, inner HTML भी यही value देता है, और text content भी यही value देता है, यह तो कैसे होगा, ऐसे कैसे चलेगा, नहीं, इन में actually में difference है, पहले मैं आपको difference बताता हूँ, inner content और inner text का, inner HTML का तो बहुत easy difference है, एक है मेरे पास inner text, और एक है मेरे पास inner content, बट थोड़ा सा change करके देखते हैं, हम क्या करते हैं, चाई और code के बाद, कि एक स्पैन ऐड कर लेते हैं और उस पैन के अंदर लिखते हैं टेस्ट टेक्स्ट ठीक है जी और यहां पर टेक्स्ट जैसे हमने एड करा अब सबसे पहले गौर से देखिएगा एक बार इसको रिफ्रेश कर देता हूं मैं और अब क्या करता हूँ मैं यहां पर जाकर एक स्टाइलिंग एड करता हूँ इस स्पैन के अंदर ठीक है एक स्टाइल एड करते हैं उप्स जिसको बोलते हैं डिस्प्ले ये लीजे डिस्प्ले और इसको कर देते हम नन अब डिस्प्ले नन यहां पर स्टाइलिंग देने से क्य टेक्स्ट कॉंटेंट क्या है ठीक है तो अंतर पता लग गया आपको दोनों के बीच में कि जब आपने इनर टेक्स्ट कहा तो आपके पास सिर्फ वो टेक्स्ट है जो एक्चुली में विजिबल है बट क्योंकि उसके अंदर अभी और भी टेक्स्ट है जो कि कुछ डिस्प् तो मुझे वह भी चाहिए तो अब इसी बात है तब मैं टेक्स्ट कांटेंट यूज करूंगा कि सारा टेक्स्ट कांटेंट दो मुझे और अगर मुझे लगता है नहीं जो दिख रहा है बस उसी के साथ से मुझे विजुअल चेंजिस करना है तो मैं इनर टेक्स्ट य HTML का value दे रहा है तो उसके अंदर अगर कोई HTML आपने लिख रखा है तो वो भी आपको मिलेगा इस case में वापिस यही सबसे बड़ा अंतर होता है inner HTML वे यह जब आप values को set करते हो तब भी आप कई बार देखते inner HTML की जगे inner content की जगे inner HTML set करते हो क्योंकि हमें H1, H2 tag वो सब भी सामने देने हैं तो inner HTML tags आपके HTML tags को भी support करता है बट अगर आपको inner content या text लेना है तो वो HTML tags को support नहीं करता है ठीक है तो यह तो हो गया हमारा बेसिक अब मैं थोड़ा सा आपको इन टेक्स को सेलेक्ट करने के बारे में थोड़ी सी और वैल्यूज और बातें बताता हूं कि और कैसे कर सकते हैं तो इसको हम कर देते हैं क्लीन ठीक है अब क्या करके भी देख लेते हैं ठीक है जी एक क्लासनेम है अब इसके अंदर क्लास आपने कौन सी लगाई थी वह पास कर दीजिए तो यह हमारी क्लासनेम इसमें लगाई थी हेडिंग तो हेडिंग पास कर दीजिए कोई दिक्कत वाली बात नहीं है इतना तो आप अच्छे query selectors use, समझ ले, जो कि actually में आप use करेंगे, real world में, तो देखे, सबसे पहला जो query selector आप use करेंगे, वो करेंगे, document by dot query selector, ये directly आपको query selector दे रखा, अच्छा query selector और query selector all, दोनों में बहुत difference है, ठीक है, तो ये देखे, मैंने use करा query selector, select करके, तो page पे जिते भी h1 होंगे, आपको first h1 दिया जाएगा, अब इसको और समझने के लिए हम क्या करते हैं, एक दो H1 और H2 और add कर लेते हैं ताकि हमें समझ में आए, तो ये लीजिए एक H2 भी add कर लेते हैं, इसके अंदर कुछ lorem के 3 words, 4 words डाल देते हैं, एक और H2 ले लेते हैं, इसके अंदर भी तेही values ले लेते हैं, और एक और कि सिर्फ सब्सक्राइब करके दिया कि क्वेटी सिलेक्टर ऑल नहीं है एक और साइड मेथड होता है क्वेटी सेक्टर ऑल पर उसने सिर्फ आपको एक सब्सक्राइब करके दिया ठीक है अब हम चाहते हैं कि हम आईडी को लिखे और टाइटल लिख दीजिए जैसे CSS में सेलेक्ट करते हैं तो आपको वो ID मिल गई आपको इसी तरह से class select करना है तो हमने class वहाँ पर लिखी थी heading class भी heading लिखी थी हाँ class heading लिखी थी तो class आपको select करनी है तो इसको हटा के आप dot से लिख दीजिए dot और यह heading तो यह लो� कि और भी स्लेक्टर दे सकते हैं अगर आपने सीएसस पड़ी होगी सीएसस स्लेक्टर सच्चे से पड़ा होगा तो आप और भी काम कर सकते हैं जैसे सपोर्ट करिए आपको इनपुट एलेमेंट सेलेक्ट करना था तो आप इनपुट भी इस तरह से तो अब ऐसी बात है न लाएगा, लेकिन मैं यहाँ पे जाके अगर एक input field add कर देता हूँ, input field जो की type है password, ठीक है जी, यह मैंने add कर दिया है, और page refresh हो रहा है, थोड़ा सा time ले रहा है, ठीक है, तो अगर मैं उसको वापस से लिखता हूँ, तो अभी मुझे वो input tag select हो गया है कि आप बाकी सारे जिस तरह से भी CSS Selectors लिखते हों, सब यहाँ पर support करते हैं, जैसे आपको कुछ चाहिए कि सपोस करिए मैं कोई image select कर रहा हूँ, या फिर कोई paragraph select कर रहा हूँ किसी div के अंदर, जो की first child है, तो आप इस तरह से first child वगरा वो सब भी लिख सकते हैं, यह आपके CSS तो यहाँ पे एक जो use case आता है उसको भी हम देखते हैं, देखिए suppose करिए आपके पास यहाँ पे एक unordered list है, उस list के अंदर आपके पास list items है, suppose करिए तीन आपके पास item है, यहाँ पे हम value लिख देते हैं 1 और इसके अंदर लिख देते हैं 2 और इसके अंदर लिख देते हैं 3 कि अब क्वेटी सेलेक्टर से क्या मैं इस एलेमेंट को सेलेक्ट कर सकता हूं हां जी बिल्कुल कर सकते हैं आप डायरेक्ट वैल्यूज दे दीजिए यह नहां पर वहां पर कोई आईडी है ना क्लास है तो आप बोल दीजिए कि मुझे क्या तो UL मेरे पास पूरा आ गया, उसके अंदर जित्ते list item थे, वो सब भी select हो गये है, ठीक है, इसको एक variable में store कर लेता है, चलिए जी, इसको बोल लेता है, my unordered list, my UL, ठीक है जी, यह हमने दे दिया, अभी हमारे पास variable के अंदर है, इस variable पे आप further queries भी चला सकते हैं, जैसे कि कि यह लीजिए क्वेरी सेलेक्टर अब इसमें से क्या सेलेक्ट करना आपको हो सकता आपके पास उसके अंदर क्वेरी सेलेक्टर के अंदर या फिर कोई पैरेग्राफ आपने सेलेक्ट कराए कोई डिविस लेकर आपने उसके नारों सकता पैरेग्राफ अंदर तो सपोस करिए इसको मैं देता हूं टर्न ग्रीन नाम से क्योंकि इसको मुझे ग्रीन में कंवर्ट करना है तो यह लीजिए कर दिया क्योंकि मेरी पुरानी knowledge जो थी turn green वाली जो मैंने styles वगरा की दी थी वो मैं यहाँ पर भी काम मिले सकता हूँ जैसे dot style मैं यहाँ पर लगा सकता हूँ और वो इसका background color यह लीजिए background color और इसको value दे देता हूँ मैं यहाँ पर green यह लीजिए और इसी के साथ अगर मेरे को और भी देना है कि मुझे सपोस कर यह padding देनी है कुछ 10 pixels की मैं यहाँ पर padding दे दूँगा तो यह लीजिए padding यह लीजिए पैडिंग आ गई देखा कितना आसान है वैल्यूज को सेलेक्ट करना अगर आप उसके अंदर कांटेंट भी देना चाहते हैं वह भी कुछ देना चाहते तो वह भी दे सकते हैं तो आपको चाहिए कि नहीं मुझे तो एक टर्न ग्रीन जो है इसका मुझे और कुछ वैल्यूज चाहिए टर्न ग्रीन के अंदर मुझे चाहिए इसका इनर टेक्स चाहिए यह लीजिए आप किसी रीजन से फाइव होना चाहिए यह लीजिए पाइव हो गया है तो देखा कितना easy है dom को manipulate करना, अगर आपको ये समझ में आ जाए, कि मैं इसको कैसे select कर सकता हूँ, कैसे values को ले सकता हूँ, अच्छा ये तो अभी ये तक हमने जितनी बात करी, वो सारी बात थी, कि हम एक individual element को कैसे select करते हैं, पर पर्टीन कर लें बताइएगा तो अभी हमारे पास एचटेबल हम उत्ताई रखेंगे लेकिन एक और चीज पर बात करेंगे कि अभी तक हमने जितना भी काम करा वह आप देख सकते हैं कि हमारे पास जो था वह था क्वेडी सिलेक्टर अब क्वेडी है जिससे हम और भी सिलेक्टर को यूज कर सकते हैं ठीक है तो मैं यहां पर इसको तो हटा देता हूं रिफ्रेश कर तो वही वापस से same document लेकिन इस बार query selector नहीं, इस बार query selector all, ठीक है, यह query selector all किया और मुझे सारे list item select करके दो, तो पहले तो एक ही list item select हो रहा था, अभी मैंने कहा मुझे सारे list item दो, तो आपको मिला है node list, अच्छा जी node list दिखने में तो लग रहा है, array मिला है, ठीक है जी लेकिन for each तो दे रखा है, अब मैंने पढ़ा है कि जब भी ये array होता है, तो इस array के अंदर मैं loop लगा सकता हूँ, यहाँ पे maps call कर सकता हूँ, तो क्या मैं यहाँ पे भी कर सकता हूँ, तो suppose करते हैं, इसको एक variable में hold करते हैं, इसको बोलते हैं हम temp li list, ठीक है, और actually मैं यहीं कि इसने बोला वह मैंने गलत लिख दिया सॉरी तो ठीक है अरे दो मिनट में शिव यह तो चेंज जाएगा यह लीजिए तो आपके बहुत से लोग जब डाउन पड़ते हैं उसमें यह सबसे बड़ी गलती करते हैं कि इसको वह समझ लेते हैं देखिए जो नोड लिस्ट है और एचटीएमल कलेक्शन है यह आपके प्यूर एरे नहीं है और सबसे easy जो तरीका है वो मैंने आपको अभी बताया कि जब भी आप इस तरह से लिखे तो पहले उसकी properties चेक करिये, especially prototype, क्या-क्या values आपको available है, तो यहाँ पे आपको for each तो available है, लेकिन कहीं पे भी map available नहीं है, एरेस के अंदर आपको by default ये map वगरा सब मिलते हैं, इसलिए आप map लगा पाते हो, कैसे, अरे अभी बता देते हैं आपको, तो ये लीज़े आपने एक array लिया है, my error, और ये लीज़े इसके अंदर 1, 2, 3, 4 value डाली, और जैसे ही आप my error array को लेंगे वहाँ पे, my तो आप जैसे इसको open करके देखेंगे, इस prototype के अंदर, तो आपको value दिखेगी वहाँ पे, कि किस तरह से देखेंगे, यहाँ पे आपके पास, यहाँ टेंप एलाई लिस्ट पर टेंप एलाई लिस्ट आपकी क्या है नोड लिस्ट है अब नोड लिस्ट होता है ना यह ऐसे काम नहीं करती है इसके अंदर थोड़ा सा चेंज आता है जैसे आप क्या कर अभी सब्सक्राइब बोल रहे थे कि टेंप एलाई लिस्ट है इसके दे दो ग्रीन देते आ रहे हम तक हम लेकिन वह क्रीन हो जाएगा क्या नहीं होगा इसने कहा यह काम एक बार मैं इसको page को refresh कर देता हूँ, ताकि हमारे पास basic वापिस से आ जाए, जो भी elements थे, ठीक है, तो ये काम हमारे पास नहीं हो सकता है, ठीक है, समझ में आ गया, अच्छा, ये काम अगर करना हो तो कैसे, देखिए, note list है, लेकिन इसका मतलब ये नहीं कि arrow से बिल्कुल अ अच्छा temp-ali list है ही नहीं अभी तो, तो वापिस से back आते हैं, और इसको वापिस से एक बार हम करते हैं, तो थोड़ा सा पीछे जाते हैं, ये लीजे temp-ali list, query selector all, ठीक है जी, अभी हमारे पास है क्या temp-ali list, हाँ जी अभी तो है, वापिस से वोई code चलाते हैं, temp-ali list, style green, इसने एरे है नहीं बट एरे से काफी खूबिया इसकी मिलती भी जाती है अच्छा ये एक्जांपल मैंने आपको क्यों दिया क्योंकि इस एक्जांपल में काफी लोग गलती करते हैं जैसे कि हम क्या करते हैं एक और यहाँ पे नयाई variable लिख लेते हैं तो इसके अनर लिख देते है अब my h1 के अंदर है क्या, वापिस से node list है, ठीक है, लेकिन क्योंकि page पे एक h1 है, तो आप अभी भी जाके ये नहीं कर सकते कि my h1 लो, इसके अंदर क्या करो, सीधा style लो, और उसके अंदर color change कर दो, और color क्या देना है मुझे यहाँ पे, तो बेसिक foundation वही रहेगा, कि यहां पर भी जो एलिमेंट है उसको बताना पड़ेगा कौन सा वाला एलिमेंट तो मैंने कहा जीरों एलिमेंट जो है उसको ग्रीन कर दो तो ग्रीन होगा तो यही एक मेजर डिफरेंस होता है क्वेरी सेलेक्टर और क्वेरी अच्छा, टेंप लिस्ट के ने जैसे ही मुझे पता लगा कि अच्छा, मुझे यहाँ पे for each लूप दे रखा है, बस होगा काम क्योंकि for each तो मैंने बहुत अच्छे से पढ़ा है, तो मैं क्या करूँगा, टेंप लिस्ट, हाँ जी आ जाइए, आप बोलिए for each, ये लीजे for है तो इसको बोल दीजिए एल बोल दीजिए फॉर एलाई ठीक है जी और यहां पर यह लीजिए कर ली ब्रेस स्टार्ट करा एंड करा इसको एंटर करते हैं यहां पर उपस्ट शिफ्ट दबा कर एंटर करना होता है तब एली के अंदर जाते हैं तो इसके अंदर क्या करना है हर एक एल को लो और इसके अंदर कुछ चेंज करो क्या चेंज करते हैं चलिए स् यह लीजिए background color और background color कौन सा कर देना है वो ही हमारा favorite green पता नहीं क्यों इस सीरीज में green लेकर चल रहे हैं पर ठीक है तो यह हमने दिया देखे सब green हो गए अभी ठीक है हाँ उसकी value गायब हो गई यहाँ पर क्योंकि वो हमने पहले जो कारणा में किये थे उसके जैसे गायब एक दो वैल्यूस पीछे जाकर वहाँ पर ले सकता हूं ठीक है इतना तो आपको समझ में आ गया है अच्छा अभी हम चलते हैं और एक और चीज पर जिसके बारे में थोड़ सी चर्चा में छोड़ दी थी ठीक है तो हम क्या करते हैं तो node list से convert करना पड़ेगा, array में और array के उपर जो चाहे आप लगाईए, ठीक है, तो अब हम आते हैं दूसरे method पे, तो यह हमारा हो गया, एक और method अगर आपने सुना होगा, get element by class name, ठीक है, get element by class name, लेकिन उसको लगाने से पहले क्या करते हैं, हम list item हार पास यह 3 है, 4 कर लेते हैं, just for fun, यह लीजिए फोर हो गया और मेरे को सबके ऊपर क्लास लगानी है ठीक है तो यह सबके ऊपर मैं क्या करता हूं यह लीजिए और सबको बोलता हूं कि आप क्या करें एक क्लास लगा लीजिए और सबके ऊपर क्लास है कौन सी क्लास लगाएं लिस्ट ठीक है जी बेसिक ऐसे हमने लगा दी या लिस्ट आइटम ठीक है यह ज्यादा ठीक रहेगा लिस्ट आइटम ठीक है जी तो यह propagate नहीं होगा effect अब मुझे चाहिए document.getElementByClassName सपोस करिए मैं इसको use करना चाहता हूँ तो क्या लिखूँगा मुझे सारे element लाके दो जिसके अंदर class कौन सी लगी हो class लगी भी हो अभी देखिए आपको return type क्या मिल रहा है HTML collection जो की different होता है आपके node list से अंतर है दोना मेरा बहुत important अंतर है तो मैंने कहा कि मुझे दो list item ठीक है जी हमने दे दिया आपको list item अब HTML collection आपको मिला है इसके अंदर भी देखते हैं प्रोटोटाइप है क्या, तो इसके अंदर क्या है, item है, length है, named item है, ठीक है जी, लेकिन यहाँ पे कुछ looping का तो option नहीं रखा है यहाँ पे, हाँ यह तो सबको मिलेगा है क्योंकि सब कुछ object ही होता है, यह तो ठीक है बात, लेकिन loop करने का तो है तो इसको क्या करते हम एक वैल्यू में स्टोर कर लेते हैं कॉन्स्ट इसको बोलते हैं एंप क्लास लिस्ट यह लीजिए अब एचटीएमल कलेक्शन तो है मेरे पास यह टेंप क्लास लिस्ट के अंदर लेकिन क्या मैं इस पर फॉर इस लगा देता हूं अभी लगाकर देख लेते हैं यह लीजिए फॉर इच और मैं इसके अंदर एक फंक्शन और यहाँ पे आके shift के साथ enter कर दिया, console log ही करके देख लेते हैं कि li में आ क्या रहा है, तो ये लीजे console.log और बोल दिया कि मुझे तो क्या करो ये जो भी li आ रहा है वो बस लिख के बता दो क्या आ रहा है, run करता हूँ उसने बोलता है देखिए ये जो temp list है ना इसके पास य कंवर्ट करना पड़ेगा ना तो वैसे सेम काम है HTML कलेक्शन को भी कंवर्ट करना पड़ेगा पहले तो HTML कलेक्शन को कंवर्ट कैसे किया जाए तो देखिए एक बहुत ही सिंपल सा मेथड होता है जिसके थरू आप कंवर्ट कर सकते हैं तो देखिए मेरे पास यह है टेंप ल कहां से मैं array को convert मतलब कोई value दो और उसको मैं array में convert कर दूँगा तो ये लीजे from from किस से करना है ये हमारा जो temp class list है इस से ठीक है ये मैंने दिया तो अभी हमारे पास जो values है वो है array अब इसको अगर आप open करके देखोगे देखे flat map भी है आपके पास for each भी आ गया है काम तो हमारा push भी आ गया है तो ये बात तो fact है कि अब हमने array के अंदर convert कर लिया है इस temp list को अब चाहे तो आप इसके ऊपर एक variable hold कर लीजे, तो suppose करिए मैं यहाँ पर बिलता हूँ const my converted array, ठीक है जी, और इसके अंदर मैंने कहा कि दुबारा से काम करो यह array लो, और from कहां से convert करना है, तो मेरी वोई पुरानी temp class list वो ले लो और इसको hold कर लो, तो अब मेरे पास technically my converted array के अंदर यह array आ गया, अच्छा अब सबसे interesting बात, क्योंकि अब मेरे पास वो सारे methods वगरा available हैं तो क्या मैं use कर सकता हूँ just for fun for each ये use कर लेते हैं आप चाहे तो map use कर लीजे तो देखिए अब मेरे पास for each available है suggestion में भी आ रहा है ये लीजे अब मैंने कहा function लो ठीक है जी ले लिया और ये लीजे function ये लीजे अब क्या करो इस function के अंदर हर एक value जाएगी और li के अंदर क्या करो ये li लिया और इसके अंदर style लीजे और उस style का सिर्फ color ही change कर लेते हैं, बोर्टाइम हो गया, green करते हुए, थोड़ सा blue करते हैं अब इसको, अच्छा तो नहीं लगेगा ज़ादा, orange कर लेते हैं, ठीक है ची, यह orange किया, enter किया, और orange values हो गई है हमारे पास, ठीक है तो इस तरह से, HTML collection को use किया जाता है, कि जब भी आप query selector use करे, class use करे, क्योंकि वहाँ पे भी तो कुछ fun करके देखना पड़ेगा, अर देखिए मुझे लग रहा है यह जो राइज ऑफ जावास्क्रेप्ट ग्रोथ स्टैंडर्ड अडॉप्शन बाइ माइक्रोसॉफ्ट आज माइक्रोसॉफ्ट बहुत अडेट कर रहा है तो यह क्रिएशन इसको सेलेक्ट करके और इंस्पेक्ट करके देखते हैं कि क्या है इस है तो ओ सॉरी कोट लगाना भूल गया था तो यह लीजिए यह चूट क्या मिला नोट लिस्ट मिली है तो नोट लिस्ट के अंदर मुझे पता है स्लेक्ट ऑप्शन से सबके अंदर हमारे पास वैल्यूज है बहुत सारी वैल्यूज आई है ठीक है एक काम करते हैं इसके अंदर बोलते हैं कि इसको एक वेरिबल में होल्ड कर लेते हैं और इसको बोलते हैं ऑल एच टू ठीक है और क्या करते हैं ऑल एच टू जो है उसका हम क्या बोलते हैं कि फर्स्ट एलिमेंट उसका मुझे इनर टेक्स्ट लाकर दो भाई ठीक है जी यह लीजिए इनर टेक्स्ट आ रहा है कॉन्स्टेंट्स तो यही तो बात है हमारे पास कि जावास्क्रिप्ट के अंदर हमारे पास यह जो है क्रिएशन और कॉन्टेंट्स तो अभी तक तो हमारे पास वैल्यू फर्स्ट तो हमारे पास हिस्ट्री आ रही है सेकंड वैल्यू के आरे ट्रेडमार्क आ रहा है तो ठीक है वैल्यू तो कौन सी वैल्यूज है वह देखना पड़ेगा भी हमें थोड़ा सा स्कूल एक्सपैंड कर लेते हैं अच्छा तो हमें यह सारे एच टू और यह सारे तो यह भी हमने तो देखा ही नहीं था कि यहां पर वैल्यूज है क्या तो यहां पर भी एच टू वगरा यहां पर और देखते हैं कि अक्षरी में एलिमेंट के अंदर और क्या है तो यह वाली जो क्लास है यह वाली क्लास है तो हम इसको बोलते हैं कि क्या करो कि document.com इस टेक्टर और यहां लिए क्लास चाहिए तो क्लास के लिए डॉट लगाते हैं और यह मदल हेडलाइन तो अभी हमें जो नोड लिस्ट मिली है और काफी बड़ी मिली है लेकिन उसके देखिए हमारे पास नोड लिस्ट 40 आई है जी काफी सारी हेडिंग्स है यहां पर तो इसको भी होल्ड कर लेते हैं एक माइट एच टू के अंदर ठीक है जी वापिस से जाते हैं माइट एच टू के ऊपर अ और बोलते हैं कि आपका जो first element है उसका मुझे inner text दो, तो अब आपके पास वापिस से वो ही history वगरा तो शायद उसके अंदर भी classes लगी हुई है तो ठीक है, अच्छा अब मैं क्या चाहता हूँ, कि ठीक है इतना तो मुझे समझ में आ गया, लेकिन अब मैं चाहता हूँ कि ज तो क्या ये node list है, अभी हमने just जो पढ़ा था, वो सारी हमारी values वगरा सब काम करेगी क्या? देखते हैं एक बार, तो ये my h2 है, इसके उपर क्या मैं foreach लगा सकता हूँ? हाँ जी, बिलकुल लगा सकते हैं, क्योंकि जो आपने basic पढ़ा है, वो exact वो का हुआ है, उस edge के अंदर एक style add कर दो ठीक है आप गौर से देखेगा यहाँ problem आईगी थोड़ी सी देखते रहेगा और style क्या करो उसका color ही change कर लेते हैं और उस color को क्या कर दो आप और red कर दो तो यह हमने color लिया और add कर दिया तो अब देखिए आपके जितने भी value select थी वो सारी की सारी कर रहा हूँ यह creations वगरा जो सब आ रहे ठीक है अभी रेड तो थोड़ा अच्छा नहीं लग रहा तो मैं इसको वापस से ब्लैक कर देता हूं तो यह वाला इसको हम लेते हैं और वापस से ब्लैक कर देते हैं अब जरूर थोड़ना एकी लाइन का कोड चलाएंगे जादा भी multiple भी चला सकते हैं तो यहां सेमी कॉलन चलिए आप कहते हैं तो padding भी add कर देते हैं, h.style.padding, और padding कितनी add करें, 10 pixel कर दें, ठीक है जी, 10 pixel padding, लीजे, आप देखें किस तरह से manipulate कर पा रहे हैं सारी values को, ठीक है, देखा, बहुत ही आसान था, तो हाँ जी, page values को इन सब को हम manipulate करना तो सीख रहे हैं, कि अब कैसे कर सकते है और साथ मैं बोल देता कि इसके बाद क्या करो, सेमी कॉलनेक लगाओ यहाँ पे, और बोलो कि एच के अंदर जो इनर टेक्स्ट है, उसको मैनिपलेट कर सकता हू कि यह तेश दे दो यहां पर आज मैंने प्लेट हो रहा तो देखा कितनी अच्छे से आपको वैल्यूस को लेना भी आ गया और उनको मैन्यूप्लेट भी करना आ गया और आपको यह भी समझ में आ गया कि वैल्यूस को अंदर हमें हटीमल अगर तो यह तो जावास्क्रिप्ट का इंपैक्ट है अभी जितना हमने काम किया है अभी हम कॉनसोल के अंदर करें लेकिन हम जाएंगे यहाँ पर कोड के अंदर एक स्क्रिप्ट टैग ओपन करेंगे या फिर अपनी स्क्रिप्ट फाइल बनाएंगे और सारा का सारा वैल्यूस को इस तरह से सेलेक्ट करेंगे और मैनिफिलेट करेंगे। step by step चलेंगे तो आसान भी रहेगा और मज़ा भी आएगा तो उम्मीद करता हूँ ये जो DOM का वीडियो है आपको काफी अच्छा लगा होगा और काफी कुछ सीखने को मिला होगा आपको उसके अंदर