Up next in 10
JavaScript - Selecting by Ids, Classes, and More _ Sigma Web Development Course - Tutorial #68
302 views
Mar 11, 2024
In Tutorial #68 of the Sigma Web Development Course, participants dive into the nuances of JavaScript for selecting HTML elements by Ids, Classes, and more. This tutorial offers a comprehensive exploration of the Document Object Model (DOM), guiding viewers through the process of precisely targeting and manipulating specific elements within a web page using JavaScript. Viewers will gain practical insights into efficient selection techniques using Ids and Classes, enabling them to enhance the interactivity and responsiveness of their web applications. Whether you're a novice coder or looking to refine your JavaScript skills, this tutorial is a crucial step toward mastering the art of element selection and manipulation. Join the course to elevate your understanding of JavaScript and unlock new possibilities for crafting dynamic and engaging web experiences.
View Video Transcript
0:00
जावस्कृप्ट के अंदर डॉम को सर्च करने के भाव सारे मेथड्स होते है�
0:03
जैसे कि getElementById, getElementsByClassName, फिर एक document.query selector होता है जिससे कि आप लोग CSS selector का इस्तेमाल करके किसी भी element को target कर सकते है�
0:12
इन सारे मेथड्स के बारे में आप लोग को इस वीडियो के अंदर बताऊंगा और कब कौन सा यूज़ करना है ये भी बताऊंग�
0:16
आप लोग इस वीडियो को लाइक करके नीचे कॉमेंट सेक्षिन में सिगमा पैचो भी जरूर लिग देन�
0:21
चलते हैं कॉम्प्यूटर स्ट्रीम में लेट सोल देंटरो सो गईज मैं आ चुका हूँ यहाँ प�
0:34
और क्लिक करूँगा यहाँ पर और यहाँ पर और उसके बात यहाँ पर बटन दबाक�
0:40
यहाँ पर folder बनाऊंगा यहाँ पर रैट लिग करकर यहाँ पर क्लिक करूँग�
0:44
फिर यहाँ पर क्लिक करकर यहाँ पर लिग दूँगा और आज हम जो बात करने वाल�
0:49
जिस चीज की वो इतनी ज़ाधा इंपोर्टंड है कि आप लोग प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक�
1:22
प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रो�
1:52
प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक्ट में प्रोजेक�
2:22
अब मैं चाहता हूँ कि जो मेरा तीसरा box है वो red हो जाये उसका background red हो जाय�
2:26
तो मैं कैसे उसको target करूँगा या तो मैंने आप लोगो जो पुराने वीडियो में पिछला वाला ज�
2:30
मारा वीडियो तो उसमें method बताया था कि आप लोग individual boxes के क्या कर सकते ह�
2:35
पर परेंट को target करके उसके तीसरे चिल्डरें को access कर सकते हो और कहा सकते हो कि मुझे तीसर�
2:42
चिल्डरें का क्या चाहिए एकसेस चाहिए और उसका मैं dot style dot background color करके change कर सकता हू�
2:49
लेकिन इसकी ज़रूरत नहीं है अगर मैं आप पर एक method का प्रियो करूं मैं करूं let a is equal to यहाँ फे let bhu's यहाँ फे भुपेंदर जोगीज is equal to पुरा ही लिख देता हू�
2:59
भुपेंदर जोगीज is equal to और मैं आप पर लिखा हूँ document dot get elements by class name और यह आपका आपको पुरा type करने की ज़रूरत नहीं है आपकी IDE आपको बता देगी ठीक है और मैं कहूंगी मुझे वो सारे elements चीज़िए जिन में box नमकी class लगी हुई है और मैं इसको print करना चाहता हू�
3:29
तो यहाँ पर यह सारे boxes आ चुके हैं अब मैं कहा चुकता हूँ क�
3:34
आज जो मेरा second वाला या निकी index टू वाला जो यहां से तीसरा भुपेंदर जोगी है मै�
3:39
कहा सकता हूँ कि भुपेंदर जोगीज to और मैं आप पर लिखा हूँ dot style dot dot style dot
3:49
background color background color is equal to और अगर मानलों मैं आप पर red कर दू तो मुझे इसका background
3:58
color जो है वो red होता हुआ मिल जाएगा ठीक है जैसे कि आप लोग देख सकते हो अब एक काम करता हूँ आप इसक�
4:03
boxes कर देता हूँ तकि एक प्रेसेंट करे उस चीज को जो कि ये है ठीक है कभी भी अपने कोड में आप इस तरह से variables ना बनाए जो कि वो नहीं है ठीक है तो मैं आप पर boxes लिखोंगा कि ये सारे boxes है और मैंने क्या किया कि जो मेरा second index का box था उसके background color को red कर दिया बहुती simple सा �
4:33
यहाँ पर लिखता हूँ 4 यहाँ पर लिखता हूँ 5 अब यहाँ पर यह क्या न इसकी ordering प�
4:38
डिपेंड कर रहा है मैंने यहाँ पर क्या किया है कि तीसरे box को red किया है लेकिन मैं जाता हूँ तीसरा box red ना हो कि 3 number वाला box red हो मेरे कहने क�
4:45
मतलब यह है कि मालों मैंने एक नए बॉक्स यहाँ पर इंसर्ट कर दिया ड़ाई ठीक है 2.5 वाला तो क्या होगा कि अब 3 वाला box red नहीं होगा यह red होग�
4:54
क्यों होगा यह red 2.5 red इसलिए होगा कि यहाँ पर मैं red किसको कर रहा हू�
4:58
दूसरे इंडेक्स वाले एलिमेंट को कर रहा हूँ लेकिन मैं चाहता हूँ एक particular एलिमेंट को red करन�
5:02
तो मैं क्या करूँगा कि इसमें एक ID दे दूँगा और ID हम कब देते है�
5:07
जब हमें target करना होता है एक particular element को मैंने आपलोग को बताया थ�
5:11
और मैं अगर इसमें ID red दे दूँगा और इंस्टेड व सेइंग कि boxes2.style.backgroundcolor is equal to red यह ना करते हु�
5:19
मैं यूज़ कर सकता हूँ document.getElementByID तो आप लिखो ge.getElement, बी लिख दो, आई लिख द�
5:26
आप जी लिखो ए लिखो बी लिखो और आटॉमाटिकली सजस्ट हो जाएगा यह आपके variable names के लिए भी काम करेग�
5:35
यह आपके जो build-in method के लिए भी काम करेगा और यहाँ पर मैं लिखोंगा .style और यहाँ पर .backgroundcolor is equal to red जो चीज मैंने यहाँ पर करी थी वो मैं करूंगा अब क्या होगा अब instead of second index वाला element को red करने की बज़ाए कि क्या करेगा कि यह देखेगा कि और मैं यहाँ पर एक च�
6:05
नाम red box भी कर सकता हूँ लेकिन हाँ फिर मुझे यहाँ पर id भी red box करना पड़ेगा ठीक है तो मैंने यहाँ पर red box लिखा यहाँ पर भी red box लिखा इसने कह�
6:12
कि भाई जिस भी element में red box है उसे select कर लिया जाए उसक�
6:17
style को background color को red कर दिया जाए तो क्या होगा इस बार यह वाल�
6:22
red होगा जिस में भी मैंने id डाली हुई है अब अगर मैं यहाँ पर एक element insert करूं 1.5 तो यही वाला element red होगा क्योंकि मैंन�
6:31
इसको id से select किया हुए तो आप देखो यहाँ पर कि यही element red है ठीक ह�
6:35
तो इसलिए हम लोग इसको इस्तेमाल करते हैं ठीक है I hope समझ में आ रहा है सब को कि यह method क्यों उसकरना है और क्या इसक�
6:44
इस्तेमाल है और बहुत सी simple सी चीज़ है लेकिन सबसे ज़ादा हम इसी को इस्तेमाल करने वाले है�
6:48
इस course के अंदर जब बड़े बड़े प्रोजेक्स बनाएंगे तब भी इस्तेमाल करेंगे इसी क�
6:52
अब देखो यहाँ पर Dom Navigation Properties are helpful when the elements are close to each other
6:57
If they are not close to each other we have some more methods अब देखो क्या होता है कि यार parent, sibling, next sibling, previous sibling
7:04
जब elements close to each other हैं और कम elements हैं तब आप लोग इसकर सकते ह�
7:08
परेंट चाइल्ड वाला जो हमने method यूज़ किया था पिछले वीडियो मे�
7:13
लेकिन कभी कभी एक particular element को ID से target करना चाहोगे document.getElementById उसकर ल�
7:18
कभी कभी क्या चाहोगे आप कि class name से target करना चाहोगे और यहाँ पर getElements है getElement नहीं है याद रखना इस बात क�
7:26
getElements बाई class name है क्योंकि एक class अलग-अलग elements में हो सकती ह�
7:31
multiple elements में हो सकती है इसलिए elements होता है यहाँ पर लेकिन ID वाले में element होता है क्योंक�
7:37
एक ही element में एक ID होगी वो ID दूसरे element में नहीं हो सकत�
7:41
आप डाल दो तो वो एक गलत बात होगी लेकिन by rule आपक�
7:45
जो ID है ID means identifier वो एक ही element में आप लोग�
7:50
फिर होता है query selector, अब मैं query selector आपको बताता हूँ query selector क्या करता है यही काम मैं query selector से भी कर सकता थ�
7:55
मैं यही कह सकता था document.query selector और मैं कह सकता था dot
8:02
और मैं कहाँगा box यह क्या करेगा यह select करेगा पहला box
8:06
पहला box select करेगा जिसमें class box, dot box एक चीज़ note करना, यहाँ पर मैंने dot नहीं लगाया थ�
8:13
यहाँ पर मैं dot लगा रहा हूँ, यहाँ पर मैं CSS selector यूज़ करूँगा अब अगर मैं यहाँ पर style.background
8:19
color is equal to green कर दूँ, तो यह जो है इसका background color जो है वो green हो जाएगा टीक�
8:24
word wrap कर लेता हूँ और यहाँ पर आप देखो इसका background color green हो जाना चाहिए था, नहीं हुआ, let me see what's wrong
8:30
मैंने maybe कोई spelling mistake करी है, मैंने कहा document.query selector, dot box, यहाँ पर गलती स�
8:37
यह computed style आ गया, अब देखो यह green हो गया, टीके तो यह green हो जाता है, जब भी आप इसको इस तरह स�
8:44
inline CSS में by javascript जो है, add करते हैं तो, टीके तो मैंने क्या किया, inline CSS add करी using javascript
8:51
लेकिन एक बात है, यह सारे boxes को green नहीं करेगा, यह पहला जो भी selector match कर जाएगा, उसके साथ काम करेगा, टीक�
8:59
लेकिन आप चाहते हो कि, आर सारे मुझे चाहिए, तो उसके लिए आप क्या करोगे, आप यह नहीं use करके, आप use करोगे य�
9:05
document.querySelectorAll लेकिन यह इतना simple नहीं होगा, document.querySelectorAll आप जैसे ही करोगे, क्या होगा, मैं आपको दिखाता हू�
9:15
यह एक HTML Collection रिटर्न करेगा जब आप कहते हो, document.querySelector.box तब यह पहला element return करता है, जो dot box selector से match हु�
9:27
लेकिन जब आप कहते हो, document.querySelectorAll तब वो एक HTML Collection return करेगा, और वो HTML Collection
9:35
कुछ इस तरह से दिखेगी, जिस में सारे वो elements आएंगे, जिस में class box ह�
9:41
अब आप चाहते हो कि इन सब का background green हो जाए, तो क्या करोगे
9:45
यूस्ट करना पड़ेगा, आपको थोड़ा सा दिमाग, ऐसा नहीं है कि आप यह कर दोग�
9:49
अगर तो, बहुत सारे लोग यह सुचेंगे, यह कर दो, हो जाएगा, नही�
9:53
इसके लिए आप सुचेंगे, यह कर दो, हो जाएगा, नहीं नहीं होगा यह, even मैं console log गटा दूं तब भी नहीं होग�
9:58
मैं इसको जरह सही से लिखता हूँ, और आपको बताता हूँ कि यह नहीं होगा, ठीक है? तो यहाँ पर अगर मैं ऐसे करूँगा, तो यह कहाँ का, कि भाई, array में आप use नहीं, sorry, HTML collection में आप dot style और background color green नहीं कर सकते, देखो, error आ गया, यह कह रहा है कि भाई
10:10
cannot set properties of undefined setting background color, यह कह रहा है भाई, array का dot style कुछ होता ही नहीं है, sorry, HTML collection का dot style कुछ होता ही नहीं है
10:19
आप अगर किसी array का dot style कर लो, यह string का dot style कर लो, क्या मतलब वो इस बात का, किसी element का dot style कर लो, तो समझ माती है बात, तो आपको for loop का इस्तिमाल करके
10:29
इस HTML collection के, इस node list के सारे element को access करना पड़ेगा, यह node list रिटन करता है, तो इसके सारे element को आप लोगो को एक एक करके, क्या करना पड़ेगा, सेट करना पड़ेगा इनका style, वो कैसे करेंगे, तो उसके लिए हमारे पास एक method होता है, for each, तो यह जो काम मैं नहीं किया है, मैं �
10:59
प्रिंट करेंगे, मैं नहीं प्रिंट करूँगा, मैं क्या करूँगा, मैं आपर लिखोंग�
11:04
E. और मैं कहूंगा style. और यहाँ पर जो background color, यह जो चीज़ है, जो मैंन�
11:11
पर पर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर पर�
11:41
परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर पर�
12:11
परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर पर�
12:41
परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर पर�
13:11
परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर परपर पर�
13:41
तो मैं कहूँ कि मुझे चाहिए क्या चाहिए मुझे मालों मैं कहूँ एइ इस एक्वल टू मुझे सारे एलिमेंट से जीवन टू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू तू �
14:11
एकदम ख्लियर है ठीक है तो ये है अमारा मैचेज अब इसके बाद क्लोजस्ट क्या है टू लुक फोर दा निरेस्ट एंसेस्टर ताट मैचेज दा गिवन सी एसस सेलेक्टर आपने एक सी एसस दी ठीक है और उसके बाद ये देखेगा कि इसका सबसे क्लोजस्ट �
14:41
नहीं इसका पेरेंट मैच करता था और अपने पर लिख दू डॉट कंटीनर तब क्या होगा तब इसका पेरेंट जो एक सी एसस सेलेक्टर को मैच करता था तो ये क्या करेगा पेरेंट के पास जाएगा उसके पेरेंट के पास जाएगा उसके पेरेंट के पास जाएगा �
15:11
कुछ मैच नहों जाएँ और कुछ मैच नहीं हुआ तो नल डॉट कर देखा जैसे कि आप लोगोंने देखा फिर होता है contains
15:17
returns true if element b is inside element a यानि कि अगर element b element a के अंदर है तो ये return करेगा true और अगर element a element b ही है तब भी ये true return कर देखा ठीक है तो अगर मैं आपर कहू�
15:31
document.query selector मैं आप लोगों को ये करके दिखाता हूं कि भाई जो container है ठीक है डॉट और इसके बाद मैं अगर कहूं contains क्या ये contains करता ह�
15:43
contains और मैं आपर लिख दूँ e2 जो कि हमारा ये वाले e का second वाले ये वाले dev है ठीक है क्या ये return करता है contain करता है और ये कह रहा है dot contains की spelling मैंने गलग दिख दिए मैं इसकी spelling ठीक करता हूं contains ठीक है तो हाँ भाई contain करता है लेकिन अगर मैं कहू�
16:04
कि query selector dot container dot contains और अगर मैं आपर लिख दूँ क्या ये contains करता है एसी रोक होगा ये खुद को contains करता है तो भी true आएगा ठीक है आता है इसा जब कोई element दो और आप पूछो कि क्या ये इसी को contains करता है तो true आता है ठीक है लेकिन अगर मैं आपर लिख हूं dot contains और मैं कहू�
16:34
तो यहाँ पर false देखने को मिलेगा क्योंकि जो body है वो इस container के अंदर नहीं ह�
16:38
इन फाक्ट body के अंदर container है तो अगर मैं ये दोनों चीज़े स्विच कर दू�
16:42
यानि कि मैं यहाँ पर कर दूं body और यहाँ पर कर दूं container ये dot container तब ये मुझे true बताएग�
16:48
तो यहाँ पर कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप पर परवार कर दूं तो आप �
17:18
परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर दूं तो आप परवार कर �
17:48
आप पर बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत ब�
#Computer Education
#Programming