Up next in 10
Element only Navigation _ JavaScript Tutorial in Hindi #34
20 views
Feb 9, 2024
"Element-only Navigation" is the 34th tutorial in a series of JavaScript tutorials presented in Hindi. In this video, viewers will likely learn about advanced techniques for navigating and manipulating elements in the Document Object Model (DOM) using JavaScript. This tutorial may cover methods and properties such as `parentElement`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, and `nextElementSibling`, which specifically target elements rather than nodes in the DOM tree. By focusing solely on elements, viewers can gain a deeper understanding of how to efficiently traverse and interact with the structure of an HTML document, empowering them to create more dynamic and responsive web applications. This tutorial caters to Hindi-speaking audiences interested in expanding their knowledge and skills in JavaScript and web development.
View Video Transcript
0:00
Guys, हमने बहुत सारे JavaScript में Domination के Methods देग�
0:03
हमने देखा कि sibling को कैसे प्राप्त करना है parent को कैसे प्राप्त करना ह�
0:06
child को कैसे प्राप्त करना है एक problem के बारे में हमने बात की थी जिसमें कि हम लोग चाहते थ�
0:12
कि जो child हमको प्राप्त हो वो सिर्फ element child हो लेकिन हमको मिल रहे थे कॉमेंट नोट्स भी हमें मिल रहे थे टेक्स नोट्स भी उनको किस तरह से अवाइट करना यह देखेंगे इस वीडियो में और एक चोटी सी वेबसाइट बनाएंगे जिससे कि हमारे कॉंसेप्ट्स क्रिस्टल क्लियर हो जाएंगे चलता है कंप्य�
0:45
ने अल्टिमेट जवास्क्रिप्ट कोड्स के अंदर राप्ल बना रखी है 32 तक 33 तक और 34 राप्ल हमारी होने वाली ह�
0:52
एलिमेंट ऑनली नैविगेशन तो मैं यहां पर क्रिएट पर क्लिक करूंगा और यह राप्ल बन जाएगी ठीक है सबसे पहल�
0:59
यहां पर क्या करूंगा एक वेबसाइट बनाऊंगा एक ऐसी वेबसाइट जो कि आप शुरू में काम करेगी आप स formations
1:05
ठीक है तो बहुत ही सिंपल सी वेबसाइट होगी और थोड़ी सी अगली वेबसाइट होगी बट हम लोग उससे बहुत सार�
1:10
क्वेश्चन को सीखेंगे तो मैंने आप रॉपर को लाइन डिस्ट्रॉप एंडेट्स क्रिप्ट डॉट जस और स्टाइल डॉ�
1:16
सीएस इस ठीक है सीएस को एकदम इंग्नोर करना आप लोग तीमालों मैं एक वेबसाइट बनाना चाहता हूं और मालो�
1:21
एक वेबसाइट बनाना चाहता हूं पोर्टफोलियो वेबसाइट ठीक है मैं बनाना चाहता हूं अब मैं यहां पर क्य�
1:28
चाहता हूं कि मेरा एक नाव बार हो ठीक है तो मैं यहां पर एक नाव बार का इस्तेमाल करते हुए एक यूएल टाइ�
1:37
लूंगा और यूअल टैक के अंदर मैं क्या करूंगा एक एलाई लूंगा और उसके अंदर मैं आप इस तरह से होम बनाऊंग�
1:45
फिर उसके बाद मैं यहां पर कुछ और इस तरह से बनाऊंगा जिसे मान लो मैं बनाना चाहता हूं अब आप आप मी और मान ल�
1:57
बनाना चाहता हूं हाइर में ठीक है और इसके बाद मान लो इसके अंदर मैं लिखना चाहता हूं अपने बारे में ठी�
2:04
है तो मैंने यहां पर एक पराग्राफ लिखा और मान लो मैंने यहां पर लिख दिया है आएम गुड बॉय कुछ इस तरह स�
2:12
मैंने लिख दिया, अब मैं यहाँ पर क्या करूँगा, इसको डिलोड करूँगा, तो अभिस्सी बात है कि यह चीज यहाँ पर देखने को मिलेगी
2:16
element only navigation script
2:29
डॉट बॉडी मैं यहां पर लिखूंगा होम और मैं लिखूंगा लेट बी इस इकॉल डॉक्यूमेंट डॉट बॉडी ठीक है तो भी ज�
2:36
पूरा कमेंट बॉडी है इसके बाद मैं यहां पर लिखूंगा कि बी डॉट मैं यहां पर लिखूंगा कंसोल डॉट लॉग और लिखूंग�
2:44
फर्स्ट चाइल्ड ऑफ बी इस और मैं यहां पर लिख दूंगा बी डॉट फर्स्ट चाइल्ड ठीक है और इसके बाद मैं लिखूंग�
2:59
कि फर्स्ट एलिमेंट चाइल्ड और आप लोग देखने की इसमें क्या डिफरेंस है और यह किस तरह से अलग है ठीक है त�
3:06
इसको यहाँ पर अभी clear करूंगा और आप लोग देखो मैं इसको जैसे reload करूंगा आप लोग देखना first child of b is लिखकर आ रहा है text
3:12
और first element child of b is nav इसका मतलब क्या हुआ मैं नहीं बताऊंग�
3:16
इसका मतलब यह हुआ कि जब हम first child का इस्तेमाल करते है�
3:20
तो हमको किसी भी तरह का चाइल्ड नोट देखने को मिल सकता है हमारे पास एक text नोट हो सकता ह�
3:25
वो एक comment नोट हो सकता है वो एक element नोट भी हो सकता ह�
3:30
बट जब हम कहते हैं first element child तो हमें element ही मिलेगा अच्छ�
3:35
यानि कि अगर मुझे इसका child चाहिए body का तो मुझे वह मिल जाएगा ना चाहे मैं आपको कितने ही स्पेसेस दे दूं चाहे मैं आपको कितने ही कॉमेंट्स लगा दूं अभ�
3:46
भी मैं इसको रिलोड करूंगा तो मुझे यहां पर ना मिलेगा ठीक है अगर इस कमेंट तो उपर ले जाओ कुछ इस तरह से औ�
3:53
इसको रिलोड करूं मैंने एक्चुली सेव दबा दिया पर मैं रिलोड करूं तो फर्स्ट चाइल ऑफ बी इस यह टेक्स्�
4:00
नोड आ जाएगा ठीक है इन फैक्ट इसको कमेंट नोड आना चाहिए था फर्स्ट चाइल ऑफ आप लोग यहां पर देख सकते है�
4:07
फर्स्ट चायल ऑफ बी इस कमेंट एक कमेंट नोट है फर्स्ट चायल ऑफ बी ठीक है तो इस तरह से जो है आप लोग इसक�
4:13
अगर ऐसे करोगे और इसके बाद रिलोड करोगे तो फर्स्ट चायल ऑफ बी इस एक मिनट थोड़ा सेव हुआ नहीं शायद कमें�
4:20
जाएगा ठीक है तो देखो मैंने ऐसे लिखा तो फर्स्ट लोग भी कमेंट नोड है अगर ऐस unstoppable फर्स्ट लोग भी होग�
4:26
एक टेक्स नोट ठीक है यह आपके लिए ऑटो सेव होता है और ऑटो सेव वह टाइप लगता है और अभी देखो अभी-अभ�
4:32
कमेंट नोट नहीं भी टेक्स नोट आएगा हाफ्ट टेक्स नोट आगे आप देख सकते हैं तो अगर हम लोग इस तरह से लिखेंग�
4:37
navigation notes sometimes we don want text or comment notes some links only take element notes into account
4:51
for example document.previousElementSibling previous sibling which is an element ठीक है document.nextElementSibling
4:59
next sibling which is an element document.firstElementChild क्या करेगा पहला child जो की element ह�
5:05
और lastElementChild last child जो की एक element है ठीक है so I hope element-only navigation आप लोग को समझ में आ गय�
5:11
अब मैं आप पर आप लोगों को इस website को थोड़ा style करके दिखाऊंगा और मैं आपको दिखाऊंगा कि ये सारे navigation को इस्तेमाल करें किस तरह से मैं इनके styles को change करूँगा ठीक ह�
5:20
तो आप लोग देखो मैं एक function यहाँ पर लिखूंगा और मैं यहाँ पर लिखूंगा const और मैं यहाँ पर लिखूंग�
5:26
change body red is equal to और यह होगा एक function और मैं इसको कुछ इस तरह से लिखूंग�
5:33
और मैं यहाँ पर लिखूंगा document.body और मैं यहाँ पर लिखूंगा .first child
5:50
ठीक है और अगर मैं कुछ इस तरह से करूँगा और मैं अगर इसको रन करूँ चेंज पॉडी रेड को तब आप लोग यहाँ पर देखना कि इसका जो बैकराउंड है वो रेड हो गया ठीक है इन पाक इसका नाम मुझे चेंज बी जी रेड करना चाहिए था चेंज बॉडी �
6:20
यहां पर सीएस मैंने प्लेश कर सकता हूं कुछ ऐसा करके मैं यहां पर भी आ सकता हूं और मैं कुछ इस तरह स�
6:24
भी कह सकता हूं कि भाई देखो यूएल की जो डिस्प्ले है उसको कर दो फ्लेक्स ठीक है और जैसे ही मैं यह सेव करक�
6:32
रिलोड करूंगा तो आप देखने यह कुछ इस तरह से आ जाएगी ठीक है फिर मैं कह सकता हूं यूएल की जो एलाई है उनक�
6:39
जो लिस्ट टेक्स लिस्ट स्टाइल लिस्ट स्टाइल जो है उसको नन कर दो ठीक है इसको रिलोड करूंगा तो यह बिंद�
6:48
चली जाएंगे आप देख सकते हो फिर मैं क्या कर सकता हूं मैं यहां पर जो इसका मार्जिन है उसको टॉप बॉट�
6:55
से जीरो लेफ्ट राइट से ट्वेंटी पिक्सल दे सकता हूं और इस लेफ्ट राइट पर भी मार्जिन खा जाएगा आ�
6:59
background gray background grey reload margin zero HTML body padding zero
7:19
मैं basically एक पहली website आप लोगों को यहाँ पर बना कर दिखा रहा हूँ और हम लोग थोड़ी बहुत स�
7:23
इसमें इस टीम भी डेफिनल यूज करने वाले हैं तो अब मैं यह देख रहा हूं कि इसमें मार्जिन पैडिंग क्या �
7:28
गई है अक्शुली बात कुछ ऐसी है कि यहां पर आ गई एक स्पेस ठीक है तो बॉडी में कुछ वाल्ड जी रो है पैडिं�
7:40
जीरो है सब कुछ जीरो है और यहां पर स्क्रॉल बार भी आ गया और ऊपर ऊपर से मुझे कुछ पेस दिखाई पड़ रह�
7:47
है इसक्यों अक्शनी मुझे यूएल में मार्जन जीरो भी करना पड़ेगा तभी यह स्पेसिंग जो होटेगी मैं इसको रिलो�
7:54
देखोंगा स्पेसिंग फॉर जाएगी हाट गई और मैं क्या कर सकता हूं इसमें पैडिंग ऐड कर सकता हूं �
8:02
पैडिंग कर सकता हूं एड लेट एस से फाइव पिक्सल जीरो की ठीक है टॉप बॉटम से वह कर सकता हूं फाइव पिक्सल औ�
8:09
और बाकी जीरो कर सकता हूं इन फैक्ट क्यों ना इसे मैं 15 कर दूं ठीक है तो इस तरह से आप एक बेसि�
8:16
वेबसाइट बना सकते हो ठीक है फॉर्ट्स वगैरह इस्तेमाल कर सकते हो अब इसकी स्टाइलिंग वगैरह में जावास्क्रिप्�
8:21
नहीं करना चाहता पर यू गोट द पॉइंट यार ठीक है आप यहां पर इसके कलर को भी चेंज कर सकते हो अगर चाहो त�
8:26
आप कलर वाइट करके इसको कुछ ऐसा बना सकते हो और बाकी सब चीजें जो है आप लोग एक्सप्लोर कर लेना ठीक ह�
8:34
लेगो यह बाइट कलर को यहां पर तो जावास्क्रिप्ट की साइड आप लोग फर्स्ट चाइल सेकंड चाइल लास्�
8:39
चाइल चाइल नोट अब चाइल नोट कभी होता है मैं आप लोगों को दिखाता हूं और मालों मैं यह यूएल जो है मेर�
8:45
इसके अंदर के सारे element notes को list करना चाहूँ तो मैं यहाँ पर simply
8:49
dollar zero dot children लिख दूँगा और मेरे पास child element notes आ जाएंग�
8:54
तो जो child element notes होता है वो children होता है ठीक है आप children लिखोगे तो सर्फ elements आपके पास आएंग�
9:00
तो इस तरह की चीज़े आप लोग सीखते जाओगे जैसे से आप लोग programming करोगे javascript के अंद�
9:04
I hope कि आप लोग को element notes वाला concept जो समझ में आगे अगर आप लोगों ने भी लग javascript की playlist को access नहीं किया तो उसको ज़रूर कर लेन�
9:11
अभी के लिए इस वीडियो बे इतने है गैस Thank you so much guys for watching this video
9:14
and I will see you next time
#Programming
#Scripting Languages