Up next in 10
Document Object Model in JavaScript _ Sigma Web Development Course - Tutorial #66
2 views
Mar 11, 2024
In Tutorial #66 of the Sigma Web Development Course, participants explore the foundational concept of the Document Object Model (DOM) in JavaScript. This tutorial provides a comprehensive overview of how JavaScript interacts with HTML documents, allowing participants to dynamically manipulate the content, structure, and styles of a web page. Viewers will gain a deep understanding of DOM traversal, manipulation, and event handling, essential skills for creating dynamic and interactive web applications. Whether you're a beginner or seeking to enhance your JavaScript proficiency, this tutorial serves as a crucial step toward mastering the DOM and unlocking the full potential of client-side scripting. Join the course to delve into the intricacies of the Document Object Model in JavaScript and elevate your web development capabilities.
View Video Transcript
0:00
आज के इस वीडियो में देखेंगे कि जावास्क्रिप्ट के अंदर बॉम और डॉक्यूमेंट ओब्जेक्ट मॉडल के थूँ एक ट्री लाइक स्ट्रॉक्चर में चीज़े को रिपरिजेंट करने का क्या फायदा होता ह��
0:08
आप लोग इस वीडियो को लाइक करके नीचे कॉमेंट सेक्शन में जावा स्कूटो पी जरूर लिख देन��
0:13
चलता है कंप्यूटर स्क्रीन में लेट्स रोल दे इंट्रो तो गाइस मैं आ चुका हूं अपनी computer screen में और यहाँ पर सबसे पहला काम जो मैं करने वाला हूं वो ह��
0:29
folder बनाओंगा मतलब यह चीज constant रहने वाली है इस course में कि भाई चाहे कोई कितना भी गाई कि भा��
0:34
folder बना के मत दिखाओ लेकिन मैं आपर video screen नाम से folder बना के shift right click करके open with
0:46
जो script है अपनी वो मैं डालूंगा और script जो है वो यहाँ पर मैं इस बार code लिखने वाला हू��
0:51
और आप लोगों को बताने वाला हूँ कि जो title है इसमें मैं javascript DOM अब क्या है ये DOM
0:58
DOM stands for document object model अब क्या होता है कि जिसे मालो मैं अगर यहाँ पर मैंन��
1:03
जावास्क्रिप्ट डॉम के नाम से इसको लिखा हुआ है अब आप लोग इसको देखो ठीक ह��
1:07
इस पेज में बॉडी होगी बॉडी के अंतर का जो content ह��
1:11
वो हमें यहाँ पर दिख रहा है इस पेज का title होगा जैसे कि यह देखो आप sigma web development course
1:15
यह title है इस course का इस page का sorry तो आपको title और उसी के साथ美टा टैग्स उसी के साथ body ये सब आप लोग को मिलता ह��
1:25
अब मैं भी आपको क्या करूँगा कि इसको मैं run करूँगा मैं इसको यहाँ पर click करके आपको इसका content दिखाऊंग��
1:33
और जैसे ही मैं script में लिखूंगा कि document.title is equal to
1:37
मानलो मैंने लिखा document.title is equal to harry is good लिख दिया मानलो मैंन��
1:42
तो आप लोगों को क्या है harry is good title में मिल जाएगा तो basically जैसे ही मैं इसको reload करूँग��
1:47
तो सबसे पहले तो यहाँ पर जो title होगा वो यह होगा जो कि मैंने दिया हुआ है लेकिन जैसे यह जावास्क्रिप्ट एक्सेक्यूट होगी इसका टाइटल यह हो जाएग��
1:54
document object model का इस्तेमाल किया जाता है ताकि आप लोगों का जो entire HTML है उसको map किया जा सक��
2:02
reload document title document body page reload inspect body
2:20
अब इस document.body के अंदर भी जो जो चीज़े हैं वो आपको देखने को मिलेंग��
2:25
अगर मैं यहाँ पर body में डाल देता हूँ div.container और इसके अंदर मैं डाल देता हू��
2:30
मालो div.box और डाल दूं this is a box ठीक है तो आप लोगों को यह चीज़ यहाँ पर देखने को मिलेग��
2:37
तो ये क्या है tree like structure में आप लोगों की entire HTML आ जाती ह��
2:41
जब आप लिखते है document.body और इसका इस्तेमाल होता है किसी भी element को change करने क��
2:46
या फिर अगर मैं मारलो चाहूँगा कि कोई भी element के अंदर जो text है वो मैं change कर सकू��
2:51
तो वो मैं change कर पाऊँगा तो इसे कहते हैं document object model document.body कर सकता हू��
2:56
मैं कह सकता हूँ कि भाई एक particular element का style अगर मैं change करना चाहता हू��
3:00
तो मैं कह दूँगा document.body.style.background is equal to green इससे क्या होगा कि मेरा जो document ह��
3:05
उसका color green हो जाएगा तो मैं अगर यहाँ पर लिख दूँ document.body.style
3:11
dot और मैं यहाँ पर लिख दूं background color अब यहाँ पर जो CSS properties हैं उनक��
3:16
counterparts दिए हुए background color को कुछ इस तरह से लिखा जाएगा background dash color
3:20
नहीं लिखा जाएगा और अगर मैं यहाँ पर लिख दू green तो यह एक inline CSS डाल देग��
3:24
ठीक है तो यह इनलाइन सीएसस मुझे देखने को मिलेगी यहाँ पर आप देखो तो �stagin इनलाइन सीएसस की मदद से यह इसका ज��
3:30
बैकग्राउंड कलर है वह ग्रीन इसमें दे दिया गया है तो आप जो इनलाइन सीएसस है उसको इंजेक्ट कर सकते हैं तो यह होत��
3:36
दोक्यूमेंट ऑब्जेक्ट मॉडल ठीक है अब एक होता है बॉम ब्राउजर ऑब्जेक्ट मॉडल अब डॉम और बॉम के बारे मे��
3:43
ना आप लोगों को कोई बहुत बड़ी शक्तिया नहीं देगा, लेकिन interview में पूछा जाता है
3:47
document object model क्या है, mapping होती है the entire document की inner object
3:52
ठीक है, जो object में आपको सारा content मिलता है page का, ठीक है, और जो bomb है, वो क्या है, browser object model
3:57
अब document के अलावा आप लोगों किसी के साथ काम करना है अगर तो browser आप लोगों को कुछ additional objects provide करता ह��
4:03
उसे कहते हैं bomb जैसे कि location.href आप लोगों को provide की जाती है जैसे कि आप लोग redirect कर सकते हैं एक दूसरी URL मे��
4:10
जो आपका window object होता है अगर मैं यहाँ पर लिखूं window विंडो तो एक विंडो ऑब्जेक्ट होता है जिसके अंदर आपका होता है document और यहाँ पर अगर मैं लिखो विंड��
4:19
document window document window body
4:30
अब जो window है ये global object है और आप लोगों को window.document.body लिखने की ज़रूर होती ह��
4:35
आप document.body लिखेंगे तब भी आपका काम हो जाएगा ठीक है तो window object में आता ह��
4:40
आपको डॉम आता है, बॉम आता है, और जावास्क्रिप्ट कोर आता है, ठीक है, यह एक ग्लोबल अब्जेक्ट होता है
4:44
बिना window. करें भी आप document लिखें तो वो आप लिख सकते है��
4:47
अब क्यों हम लोग इन सब चीज़ों के बारे में पढ़ रहे हैं ये मैं आप लोगों को जल्दी से पता द��
4:51
हम लोग इन सब चीजों के बारे में इसलिए पढ़ रहे हैं ताकि हम लोग javascript की साहिता से elements को target कर सके जो कि हम आने वाले videos में देखने वाले है��
5:21
एलिमेंट को सिलेक्ट करूं या इस पूरे डिव को ही सिलेक्ट कर लूँ तो आप देखो इसमें इकॉल्स टू इकॉल्स ट��
5:25
डॉलर जीरो लिखकर आ गया अब इस ट्रिक को ध्यान से सुनना जिंदगी भर काम आईगी जो डॉलर जीरो है उसको मैं यू��
5:30
कर सकता हूं इस ऑब्जेक्ट को रेफर करने के लिए तो अगर मैं अभी यहां पर डॉलर जीरो लिखूं मैं लिखूं डॉल��
5:35
जीरो तो आप देखो कि यह वाला एलिमेंट आ रहा है जिसको मैंने सेलेक्ट किया था तो जो भी चीज सेलेक्ट क��
5:40
दोलर जी हो जाती है अब लिख दूं डॉट स्टाइल डॉट बैकग्राउंड कलर और मैं लिख दूं इक्वल्स टू ग्रीन त��
5:49
मैं इसके बैकग्राउंड कलर को ग्रीन कर सकता हूं जैसे कि आप देख सकते हो तो यह डॉलर जी रो क्या है जिस भ��
5:54
एलेमेंट को आपने सेलेक्ट किया वह डॉलर जीड़ो था जिस पर यहां क्लिक किया वह डॉलर जीड़ो किया अब अग��
5:59
मालों इसको डॉलर जीड़ो बनाने चाहता हूं राइट क्लिक इंस्पेक्ट करूंगा और जिस पर एलेमेंट पर यहां प��
6:03
कर दूंगा वो डॉलर 0 हो जाएगा अब देखो यहाँ पर यह थमनेल वाला जो सेक्शन है वो डॉलर 0 है यहाँ य��
6:08
कंटेनर डॉलर 0 है तो अगर मैं अब चलाऊंगा डॉलर 0 स्टाइल रोड बैकग्राउंड कलर ग्रीन तो यह वाला ग्रीन होगा ठीक है त��
6:14
HTML head body body element leaf node text empty element
7:02
आप चाहते हों कि बॉडी के अंदर एक गिवन आईडी का है, गिवन क्लास का एलिमेंट हो, उसको आप सेलेक्ट करना चाहते हैं
7:07
multiple elements को सेलेक्ट करना चाहते हैं, वो आप कर सकते हैं, इन सब चीजों में जो है, यह आप लोगों को facility प्रोवाइड करता है
7:13
selection करने के लिए और किसी भी complex query का इस्तेमाल करके अलग अल��
7:18
elements को select करने के लिए आप CSS selectors का इस्तेमाल कर सकते हैं within
7:22
javascript कभी भी आप लोग अगर multiple nodes को with a particular CSS selector इस्तेमा��
7:29
करना चाहते हैं तो ठीक है so I hope कि आप लोग को DOM के बारे में समझ में आ गया अग��
7:32
आप लोगों के बारे में और सीखना है तो ये एक MDN का page है जिसमें क��
7:36
बताए गया है की DOM एक logical tree को represent करता है हर branch
7:40
जो है वो end करती है एक node में और ये एक object की तर��
7:44
representation है अब हम लोग जब तक करेंगे नहीं नहीं ये आप लोगों को समझ में आएग��
7:48
तो हम लोग क्या करेंगे कि आप लोगों को search करके मैं दिखाऊंगा आने वाले videos में और ये दिखाऊंगा कि किस तरह से elements को target किया जाता ह��
7:56
अभी मैंने आप लोगों को एक बहुती चोटा सा example यहाँ पर दिखाए लेकिन आने वाले videos में हम और भी complex चीज़ें करेंग��
8:02
तब आपको समझ में आएगा कि किस तरह से JavaScript की सायता स��
8:06
अलग-अलग elements को target करके maybe उनकी CSS को change करना या फिर उनक��
8:11
DOM से निकालना या DOM में add करना यह सब चीज़ें की जाती है��
8:16
तो I hope कि आप लोगों को यह वीडियो अच्छा लगा और आप लोगों को जो है चीजें सीखने को मिल रही है��
8:19
अभी के लिए इस वीडियो में इतना है गाइस अगर आप लोगों ने प्लेलिस्ट आक्सर्स नहीं करी तो इसको जरूर कर लेन��
8:23
थैंक यू सो मच गाइस पू वाचिंग इस वीडियो and I will see you next time