Up next in 10
JavaScript DOM - Children, Parent & Sibling Nodes _ Sigma Web Development Course - Tutorial #67
34 views
Mar 11, 2024
In Tutorial #67 of the Sigma Web Development Course, participants delve into the dynamic world of JavaScript DOM manipulation, focusing on Children, Parent, and Sibling Nodes. This comprehensive tutorial explores how JavaScript interacts with the Document Object Model, allowing viewers to understand and manipulate the relationships between different elements on a web page. Through practical examples, participants will learn how to traverse the DOM, access child and parent nodes, and manipulate sibling nodes effectively. Whether you're a beginner or looking to enhance your JavaScript skills, this tutorial provides essential insights into DOM navigation and manipulation. Join the course to master the intricacies of JavaScript DOM interactions and enhance your capabilities in web development.
View Video Transcript
0:00
हमने जावास्क्रिप्ट के अंदर डॉम को बहुत क्लोस्टी देखा था आज के इस वीडियो में आप लोग देखेंगे क�
0:04
नोट्स पेरेंट और चिल्डरेंट को किस तरह से एक्सेस किया जा सकता है और एक एलीमेंट को टारगेट करके उसक�
0:09
स्टाइल्स को या फिर उसके अंदर किसी एलिमेंट को आड करना यह सब काम किस तरह से किए जाते हैं आप लोग इस वीडिय�
0:15
को लाइक करके नीचे कॉमेंट्स में सिग्मा बैच भी जरूर लिख देना चलता है कंप्यूटर स्पीन में लेकिन आप इस वीडिय�
0:30
तो मैं चुका अपनी कंप्यूटर स्क्रीन के अंदर और मैं यहां पर एक नया पोल्टर बनाऊंगा वीडियो 67 के नाम से एक बात है अब आप लोगों को बताना चाहता हूं वह यह है कि अब जो हम करने वाले हैं ना वह जावास्क्रिप्ट में अक्शुल में मतलब जब हम �
1:00
आपकní विशेष प्रश्न पर आपको उठाने चाहिए तो यह थोड़ा सा आप लोग जो है अपना फोकस बढ़ा लो अब ठीक है क्य�
1:06
मैं आप लोग को बताने जा रहा हूं कि किस तरह से एलिमेंट को सेलेक्ट करना है किस तरह से डॉम के अंदर चिल्डरे�
1:11
hockey आपको बताएंगे अब आपको चीज दिखाता हूं कि आप क्या कर सकते हो फर्स्ट चाइल लास्ट चाइल चाइल नो�
1:20
यह सब चीजें जो है पता लगा सकते हो अब मैं आपको सिस्टमाटिकली इसके बारे में बताता हूं और सबसे पहल�
1:25
क्या करूंगा कि जो यह विशेष कोड के इंस्टेंस मैंने खोला हुआ इसमें कि इंडेक्स टोट ह्यूटीमन बनाऊंगा और हां आ�
1:32
लोग जो है यहां पर डिरेक्टली विस्कर ब्लॉड डाल सकते हो तो मैं काम करता हूं मैं अगर डिफिकेट कंटेनर और फि�
1:37
तो बाद मैं डिप डॉट बॉक्स लिखूंगा और मल्टीप्लाइब आफ आफ करूंगा और मैं लिखूंगा बॉक्स वन टाप दबाऊंगा बॉक्�
1:44
टाप दबाऊंगा box 3 और इस तरह से जो है मैं box 5 तक जो है कर लूंगा no surprise is there ठीक है और मैं इसक�
1:51
obviously done करूँगा तो आप लोगों को इस box 1, box 2, box 3, box 4, box 5 देखने को मिलेगा ठीक ह�
1:56
अगर मैं इसको एक CSS दे दूं बहुत ही जल्दी से मैं एक dot box नाम से class बनाओंग�
2:01
और इसके बाद यहाँ पर जो height है उसको कर दूँगा 45 pixel
2:05
width को भी कर दूँगा let us say 56 pixels और जो border है वो कर दूँग�
2:10
2 pixel solid black जाना time नहीं खाऊँगा आपका जल्दी से करता हूं इसको और यहां पर जल्दी से मार्जिन कर दूंगा 5 पिक्सिल्स और पैडिंग भी कर दूंगा 5 पिक्सिल्स ठीक है तो यह करने के बाद यह कुछ इस तरह से दिखेगा तो रहे हैं एक्शनल में बॉक्सेस दिख रहे हैं ठीक है यह मैंने बहुत जल्�
2:43
जो है वो आड कर देता हूं और मान लो script.js कर दूंगा और यहाँ पर मैं script.js लिखूंगा और मैं यहाँ पर लिखता हूं console.log hello world ठीक है मैंने यहाँ क्या कर दिया है ठीक है hello world लिखा मैंने यहाँ पर और यह javascript जो है चल रही है अब मान लो मैं चाहता हूं कि जो मेरा container है यह document.body
3:15
और आप लोगों को यहाँ पर इसलिए दिखा रहा हूँ क्योंकि समझना थोड़ा easy ह�
3:19
मैंने document.body किया तो पूरी body आ गई body के अंदर है हमारा container
3:23
फिर script भी body के अंदर है और container के अंदर further elements ह�
3:27
अगर मैं कहूँ कि document.body.child nodes तो मैं क्या कर सकता हू�
3:35
इसके सारे child nodes प्राप्त कर सकता हूँ जो इसका पहला child node ह�
3:40
जिसको मैं zero करके access कर सकता हूँ वो एक text node है क्यों है वो text node
3:45
वो text node इसलिए है क्योंकि उस text node के अंदर मैंने ये space रखी ह�
3:50
ये text node है इसको एक text node माना जाएगा इसको एक text node माना जाएग�
3:55
अगर मैं कहूँ कि मुझे next element चाहिए तो मैं कहूँगा कि div.document.body.childnotes1
4:03
यानि कि इस array का जो मैंने document.body.childnotes कहा मैं इसको इस तरह से कल देता हू�
4:09
ताकि आप लोग को दिखे मैंने कहा document.body.childnotes और document.body.childnotes मैं जैसे ही कहूँग�
4:15
मुझे मिला text ये container text script text notes element text container text node text node HTML div text node div text node and so on text nodes
5:18
डॉक्यूमेंट डॉट बॉडी डॉट चाइल नोट्स करने तो पहले डिव आ गया फिर टेक्स्ट आया फिर डिव आया टेक्स्ट आया टेक्स्ट क्यों आ रहा है क्योंकि यहाँ पर मैंने ऐसे स्पेस दी हुई है ठीक है तो यह इस तरह से जो है आप चाइल नोट्स का पत�
5:48
यहाँ पर कहा कि जो मेरा एक container है, मैं ज़राँ यहाँ पर एक variable बना लेता हूँ, मैं कहूँ को let
5:52
cont is equal to document. यह cont क्या container है, मैंने कहा कि document.body के सारे child nodes में स�
5:59
जो दूसरे number का child node है, node that index starting from 0 है, तो 0, 1, जो दूसरे number का node है
6:05
यानि कि अगर मैं document.body.childnotes करूँ तो सबसे पहले एक text note आएग�
6:10
फिर उसके बाद container आएगा ठीक है क्योंकि जो enter है जो new line है उसको भी एक text note बाना जाता ह�
6:16
ठीक है ध्यान से सुनना ही बात है क्योंकि यह video बहुत important है अब यहां से important बात है हम लोग जो ह�
6:20
बच्चे स्टार्ट करें तो आप लोगों को फोकस करना पड़ेगा ठीक है तो यह कंटेनर जो है इस कंटेनर के अंद�
6:26
कर मैं फर्थर कुछ भी करना चाहते हूं मैं कॉन्ट से इसको एक्सेस करते हैं कह सकता हूं सियो एंटि�
6:30
और अगर मैं अभी कह दूं चाइल नोट्स या मैं कह दूं फर्स्ट चाइल में उसका फर्स्ट चाइल मुझे दे दो भाई क्य�
6:36
है टेक्स्ट नोट है इसका फर्स्ट चाइल टेक्स्ट नोट है यह वाला यह जो मैंने भी हाईलाइट किया ठीक है तो यह ए�
6:41
फर्स्ट नोड इसका क्या होगा, फर्स्ट चाइल इसका क्या होगा, एक टेक्स नोड होगा, तो ये फर्स्ट चाइल और लास्ट चाइल अगर इसका मैं माँग मूँ तो वो भी एक टेक्स नोड होगा, तो मैं लास्ट चाइल भी कर सकता हूँ, तो मैं कुछ इस तरह से ला�
7:11
ऐसे देखोगे आप तो कोई ये नहीं कहेगा कि यार इस पर text है तो कुछ ऐसा नहीं हो सकता क�
7:16
मैं इसका पहला child अगर बोलू तो मुझे ये मिल जा सीधा second child बोलू तो ये मिल ज�
7:21
इसको ignore करो कुछ ऐसा नहीं होता हाँ होता है तो मैं क्या करूँग�
7:25
first element child का प्रियोग करूँगा ठीक है तो अगर मैं यहाँ पर कर दूँ con.firstElementChild तो मुझे एक ऐसा child मिलेगा पहला इसका जो element ह�
7:35
text node भी child है ठीक है child है वो but firstElementChild जब मैं बोल रहा हू�
7:41
तब मैं यह कह रहा हूँ कि मुझे एक ऐसा पहला child चाहिए जो की element ह�
7:48
text node element नहीं है ठीक है यह div एक element है अब जैसे मान ल�
7:52
कि एक लड़का है ठीक है वो सबसे बड़ा है उसकी चोटी बहन है ठीक ह�
7:58
अगर कहें कि first female child कौन है तो वो थोड़े ना होगा उसकी बहनी तो होग�
8:02
क्योंकि उसकी बहन female है ठीक है वो तो male है तो इसी लिए यहाँ पर ये जो हमारा element ह�
8:07
ये क्या है ये एक element है और ये एक text node है ठीक ह�
8:10
तो ये चीज आप लोगों को समझ नहीं है अगर मैं यहाँ पर f oatmeal लिख दूं तो वो भी एक text node में ही गिंती लेग�
8:16
ठीक है तो ये चीज आपको बता होनी चीज है इसी तरह से जिस तरह से हमन�
8:19
first element child किया मैं last element child भी कर सकता हू�
8:23
last element child और अभी यहाँ पर cont defined नहीं है तो मुझे दुबारा स�
8:27
cont को define करना पड़ेगा और मैं कहूँ cont.last element child और आप देखो last element child
8:34
मुझे box 5 मिल रहा है यह highlight भी होकर मिल रहा है और मैं कह सकता हूँ कि dot style dot
8:38
color is equal to red तो इसके अंदर का जो उपस मैंने यहाँ पर क्या किय�
8:44
मैंने कहा last element child dot style dot color equals to okay तो मुझे red क�
8:51
double quotes में लिखना है तो इसके अंदर का जो color है वो red हो जाएगा और मैं इसका background
8:55
color कह दूँ dot style dot जैसे भी लिखूंगा मुझे यहाँ पर देख�
8:59
CSS properties चोड़ना start होगी dot background color is equal to मान ल�
9:03
मैं green करूँ, मैं यहाँ पर green करूँ, तो आप देखो यहाँ प�
9:07
यह green हो गया, ठीक है, तो इस तरह से आप लोग जो है last element child
9:11
dot style dot background color करके इसका जो CSS वो change कर सकते ह�
9:15
ठीक है तो इस तरह से आप लोग जो है इसका जो parent है और child है इसके साथ जो ह�
9:21
first child
9:34
नोट जो है वह प्राप्त कर सकते हो तो क्या होगा कि अगर आप लोग पेरेंट नोट प्राप्त करना चाहते हो तो आपन�
9:41
क्या करना है कोई भी एलिमेंट है इसे मान लो मैं यह मेरा एलिमेंट है कौन डॉट लास्ट एलिमेंट चाइ�
9:47
डॉट अगर मैं कहूं पेड़ेंट एलिमेंट तो यह इसका पेड़ेंट क्या है वह आ जाएगा तो वह कंटीनर आ गया तो इ�
9:53
पेरेंट लगभी में जा सकता हूँ नाविगेट करके ऊपर ट्री में ठीक है तो यह डॉम ट्री है जिसमें हम घूम रहे हैं ठीक है अब एक और इंपोर्टेंट मेथड होता है प्रीवियस एलिमेंट सिब्लिंग यह क्या होता है प्रीवियस सिब्लिंग विच एन एलिमें�
10:23
लिखूं डॉट और मैं कहूं first element child जो की क्या होगा first element child sorry not first child
10:29
first child करूँगा तो notes आ जाएंगे और अगर मैं first element child करूँगा तो मुझे सिर्फ क्या मिलेग�
10:34
ये वाले elements मिलेंगे ठीक है तो elements कौन से होते हैं जो की HTML elements होते हैं और जो notes होते है�
10:42
उसमें क्या-क्या आता है text notes आते हैं और उसमें comments भी आते हैं ठीक है comment notes भी आतेiana
10:47
जैसे कि अगर मैं आप एक comment डाल दो इस इस में लिखकर अगर मैं आप एक comment डाल दो तो यह comment
10:51
note हो जाएगा ठीक है एक अलग से comment note हो जाएगा और यह text note हो जाएगा जिसमें सिर्फ कुछ spaces
10:56
थी कि अब और यह एलीमेंट हो जाएगा तो जब हम सिर्फ चायल की बात करते हैं फिर कहेंगे कि किसी भी ए�
11:03
एलीमेंट के सारे जितने भी चायल नोट से तो उसमें यह सारे नोट आएंगे यह टेक्स नोट आएगा यह कमें�
11:09
आएगा यह वाला एलिमेंट आएगा एलिमेंट नोट कहते हैं इसको लेकिन अगर मैं कहूं मुझे सिर्फ एलिमें�
11:13
चाहिए तो क्या आएगा इस बॉक्स वन बॉक्स टू बॉक्स फूर बॉक्स वाइब ठीक है यहां तक लिया रहे सब लो�
11:19
में लिख दो, भाई clear है, बराबर है, सब लोग लिख दो, यार चल्दी से बराबर है, two-way interaction, मज़ा आता है, ठीक है, तो अगर मैं भी यहाँ पर लिखो
11:25
document.body.firstElementChild, तो मुझे क्या मिलेगा, पहला ऐसा child मिलेगा, जो की element है, ठीक है, मिलेगा, ठीक है, तो यहाँ पर div class is equal to container, यह मुझे मिल गया, अब मैं कहूं कि यह जो first element child है, इसका भी मुझे first element child चाहिए, या फिर मैं कहूं कि मुझे इसके सारे child notes चाहिए, तो मुझे क्या-क्या मिलेगा, मुझे मिलेगा एक text मिलेगा, एक comment note मिलेगा
12:01
I hope दिख रहा है यार ठीक है ये text node होगा मेरा ठीक है फिर इसके बाद ये मेरा क्या होगा उप्स ये मेरा क्या होगा ये मेरा होगा comment node ये एक अलग से node है comment node कहते हैं इसको ठीक है फिर इसके बाद ये मेरा एक और text node फिर इसके बाद ये मेरा element ठीक है तो इसलिए text comment text element ठीक है �
12:31
तो मैं चिल्डर लिख दूंगा तो मुझे सिर्फ एलिमेंट्स मिलेंगे और यार इसको ना मैं थोड़ा सा आप लोगों को कॉपी करके ना यहां पर दे भी देता हूं क्योंकि मैं नहीं चाहता कि मैं कुछ ऐसी बातें लिखवा हूं आपको जिसका आपके पास रिकॉर्ड �
13:01
एलिमेंट हो फिर इसके बाद इसके अंदर के child notes कोई होगा तो सारे notes आएंगे जिसमें text
13:05
notes होगे comment notes होगे और elements होगे ठीक है फिर अगर मैं कहूँ children तो मुझे सिर्�
13:11
इसके अंदर के HTML elements मिलेंगे ठीक है I hope ये clear है सबको और अगर आपको समझ मे�
13:17
नहीं आ रहा है तो ध्यान से सुनो दुबारा से मैं रिपीड भी कर रहा हूं और जैसे ही मैं कहता हूं क�
13:22
document डॉट बॉडी डॉट फर्स्ट एलिमेंट चाइल टॉट चिल्डरेन मुझे सारे एलिमेंट नोट्स मिल जाते है�
13:27
फिर इसके बाद मैं यहाँ पर 0, 1, 2, 3 करके पहला, दूसरा, तीसर�
13:31
जो element है वो प्राप्त कर सकता हूँ तो मैंने यहाँ पर लिखा 0, फिर मैंने यहाँ पर लिखा 1
13:35
फिर मैं यहाँ पर लिख दूं 3, तो मुझे यह जो है मिल जाएग�
13:39
तो 0 से index start हो रही है 0, 1, 2, 3, 4
13:43
तो यह जो 3 वाला ही box 4 होगा क्योंकि 0 से गिनती start हो रही है मेरी बढ़िय�
13:48
अगर मैं कहता हूँ कि जो मेरा box 4 है जो कि मेरा document.body.firstElementChild.children
13:54
3 है मैं इसका nextElementSibling प्राप्त करना चाहूँ nextElementSibling कौन सा होग�
14:03
कौन सा होगा box 4 का next element sibling box 5 होगा sibling parent same sibling parent container box 4 next sibling box 5 box 4 previous sibling box 3
14:19
ठीक है, तो अगर मैं यहाँ पर previous element sibling करूँ, सिर्फ elements की बात हो रही है यहाँ पर
14:24
previous element sibling, element मतलब HTML element, ठीक है, most of the cases में हम elements को ही target करते है�
14:30
previous element sibling और आप देख सकते हो यहाँ पर previous element sibling में लिखा त�
14:35
यहाँ पर box 3 आ गया क्या होगा अगर मैं सिर्फ previous sibling लिखूँग�
14:39
अगर मैं previous sibling लिखूँगा ना तो मुझे text note मिलेगा क्योंकि sibling में तो सब आएगा न�
14:44
comment note भी आएगा, text note भी आएगा, जो भी उसके पहले होगा, क्या है box 3 के पहले, आप बताओ, box 3 के पहले क्या है, sorry हम बात कर रहे हैं भी box 4 की, जो हमारा child, children 3 है, box 4 है, क्या है box 4 के पहले, आओ देखते हैं क्या है, box 4 के पहले क्या है, element की बात नहीं हो रही है, किसी भी note की, यह �
15:14
तो यह नोट से निश्चित में आप लोग स्टार्टिंग से पढ़ना इसको आपको यह वॉकिंग दोम वाला जो चैप्टर इसमें पत�
15:20
चलेगा कि कौन-कौन से विधेट्स होते मैं आपको फॉर्स्ट चाइल के बारे में बताया लास्ट चाइल के बारे में बताय�
15:25
मैंने आप लोगों को element के बारे में बताया कि जब सिर्फ element child आपको चाहिए तो आप क्या करेंगे, अगर आपको किसी भी element का parent चाहिए तो आप simply क्या करेंगे, आप कहेंगे dot parent element, तो आपको इसका parent मिल जाएगा जो की container है, ठीक है, तो आप इस तरह से कर सकते हो, और उसी के सा�
15:55
उसको आप table.rows करके, table.caption करके, table.thet करके, जिसे मान लो मेरे पास एक table है यहाँ पर
16:01
मैं यहाँ पर मान लो एक container के बाद table बना देता हूँ, HTML table बना देता हूँ
16:05
और यहाँ पर मान लो मैं, मैं एक sample table ले आता हूँ
16:09
मैं एक काम करूँगा, मैं यहाँ पर HTML table में जाओंगा, और यहाँ पर एक sample table को copy कर लूँगा
16:15
और इसके बाद मैं यहाँ पर paste करता हूँ table को, और अब मैं क्या कर सकता हूँ
16:19
मैं कह सकता हूँ कि, जो body है, उसका second element child है table
16:23
तो मैं table को target करने के लिए क्या करूँगा, मैं यहाँ पर आउँगा और मैं कहूँगा document.body
16:29
और मैं कहूँगा children ठीक है जब मैं यह करूँगा तो जो दूसर�
16:34
जो इसका child है वो क्या है table है तो मैं इसको one कर दूँगा ठीक ह�
16:38
तो आप देखो मुझे table मिल गई और इसके बाद मैं क्या करूँगा मैं यहाँ पर dot rows करूँगा तो मुझे इस table की सारी rows मिल जाएंग�
16:46
मैं यहाँ पर dot columns करूँगा तो मुझे इसके columns मिल जाएंग�
16:50
I think dot columns नहीं होता है dot rows ही होता ह�
16:54
ठीक है table.rows होता है जिससे आपको सारे trs मिल जाते हैं तो आप जो है इसको try out करना है इन सारे methods क�
16:59
और आप लोगों को पता चलेगा किस तरह से जो है जो ये table के methods हैं वो काम करते हैं ठीक ह�
17:04
तो ये साले जो methods हैं क्या आप लोगों को याद करने की जरूरत ह�
17:08
मैं कहूँगा नहीं याद करने की जरूरत नहीं है जैसे जैसे हम लोग projects बनाएंगे वैसे वैसे हम लोगों को यह automatic याद होते जाएंग�
17:13
और आप लोगों को फिर पता चलेगा कि याद रखने की तो अक्शल में जरूरत ही नहीं है जैसे क�
17:17
next sibling के लिए आप next sibling यूज़ कर सकते हैं मैं तो क्या करता हूँ सीधे टाइप करना शुरू करता हू�
17:21
मेरी IDE मुझे बता देती है कि क्या अब जैसे मुझे यह पता करना ह�
17:25
कि next element sibling होता है कुछ की नहीं होता है तो मैं क्या करूँगा मैं यहाँ पर लिखूँग�
17:29
next element sibling होता है देखो next element sibling मैं यह करूँग�
17:33
मुझे इसकी next element sibling मिल जाएगी तो easy है यार बस आप लोगों को type करते रहना है
17:38
और आपको बाकी जो suggestions है, वो IDE दे देगी, उसके बाद आपको अपना idea लगाना है
17:42
थोड़ा बहुत, और हो जाता है यार, सब हो जाता है, कुछ retina की जरूरत नहीं है
17:46
मैं कभी retina को नहीं बोलूंगा आप लोगों को, और जब हम projects बनाएंगे तो यह चीज और clear होग�
17:50
एक request है बस आप लोगों से और वो request यह है कि notes को download करक�
17:53
walking the dom पढ़के आजाना यार अगले वीडियो को देखने से पहले आप मेरी बात नहीं भी मानोगे तब भी हो जाएगा काम आपक�
17:59
बट मैं कहूँगा यार walking the dorm पढ़के आजाना यार clarity रहीगी और मज़ा आएगा फिर यार अगले वीडियो मे�
18:04
मुझे भी मज़ा आएगा पढ़ाने में ठीक है so अगले वीडियो में हम लोग देखने वाले किस तरह स�
18:07
ID से target करना है किस तरह से से क्लासेस से टागेट करना यह मैं चाहता हूं जिसमें बॉक्स वाली क्लास एलिमेंट वह मुझे मिल जाए तो व�
18:15
मैं पता कर सकता हूं कि कौन-कौन से एलिमेंट है और उसके बाद उन एलिमेंट की स्टाइलिंग चेंज कर सकता हूं लू�
18:20
आकर वह सारे काम हो सकते हैं तो बस यह रिक्वेस्ट आपसे रहेगी कि आप लोग जो है वॉकिंग रोडाउन पढ़कर आजाना और यह प्लेयर ज�
18:26
तो एक्सेस करी लिया होगी अभी तक आपने अभी के लिए इस वीडियो में इतना है गाइस थैंक यू सो मच गाइस फॉर वाचिंग इस वीडियो एंड आइवल सी यू �예क्स टाइम �