Up next in 10
innerHTML, outerHTML and other properties _ JavaScript Tutorial in Hindi #41
26 views
Feb 9, 2024
"innerHTML, outerHTML, and Other Properties" is the 41st tutorial in a series of JavaScript tutorials conducted in Hindi. In this video, viewers can expect to learn about various properties and methods in JavaScript for manipulating HTML content within web pages. The tutorial is likely to cover properties such as `innerHTML` and `outerHTML`, which allow developers to access and modify the HTML content inside or surrounding an element, respectively. Additionally, other properties related to element attributes and text content manipulation might be discussed. Through practical examples and explanations in Hindi, viewers will gain a deeper understanding of how to leverage these properties effectively to dynamically update the content of web pages. This tutorial caters to Hindi-speaking audiences interested in expanding their knowledge and skills in JavaScript for web development.
View Video Transcript
0:00
गैस आज के इस प्रोडियो में हम लोग inner HTML, outer HTML और कुछ और attribute की properties को पढ़ेंगे JavaScript के अंद��
0:06
हम लोग देखेंगे console.dir का क्या use है और क्यों आप लोग इसको इस्तेमाल करना चाहेंग��
0:10
चलते हैं computer screen में और इन सारी चीजों को अच्छी दरस देखते है��
0:15
Let's get started तो वह सब्सक्राइब करने जाए चैप्टर नंबर 8 को जिसमें हम लोग देखेंगे इवेंट्स के बारे में कि इवेंट्��
0:27
क्या होते हैं और कुछ और डॉम प्रॉपर्टीज है उनको मैं पहले बताने वाला हूं आप लोगों को और समझाऊंगा आ��
0:33
वह डॉम रॉबर्डीज कौन सी है और क्यों आप लोगों मालूं बनी चाहिए और इसके लिए मैंने बना रखी है ए��
0:38
रैपल और इसके अंदर सिब्बली में क्या करूंगा बॉडी के अंदर एक स्पैन टेक डालूंगा ठीक है और मैं यहां प��
0:45
लूंगा है आईएम स्पैन और मैं इसको एक नई टैप में खोलूंगा और रैप लिए मैं आपको बताना चाहता हूं यहा��
0:52
अगर आप लिख करते हो तो आप फॉरमेट कर सकते हो ठीक है और यहां से और भी सारे ऑप्शन को आप लोग एक्सप्लो��
0:59
लो ठीक है अब यहां पर अगर मैं इसकी डाइटल लाना चाहता हूं यहां से डाल सकता हूं मैं यहां पर लिख सकत��
1:03
हूं लेटस इनर एसटीएमल ठीक है तो मैं सेव करूंगा इसको डिलोड करूंगा तो यहां पर इनर एसटीएमल लिखक��
1:10
जाएगा ठीक है अब देखो मैं यहां पर करने के वाला हूं मैं आप लोगों बताने वाले हो कंसोल डो डी आई आर औ��
1:16
कंसोल डो लॉग में अपने सबसे पहले और कंसोल डो डी आई आर को क्यों लोग यूज करना चाहेंगे अब अगर मैं यहां प��
1:21
को खोलूं और कंसोल में लिखूं अ कुछ इस तरह से कंसोल डॉट लॉग और मैं लिखूं डॉक्यूमेंट डॉट गेट एलिमेंट्��
1:30
पाइट टैग नेम और मैं मानू लेकर आऊं स्पैन को फर्स्ट स्पैन को तो मैं यहां पर कुछ इस तरह से जीरो लिख दूंग��
1:37
और जैसे ही मैं first span को लूँगा यहाँ पर और इसको console.log करूँग��
1:42
एंटर मारूँगा मैं तो आप लोग देखो यहाँ पर क्या हुआ हे आयम स्पैन लिखकर आ गया ठीक ह��
1:47
लेकिन यही चीज अगर मैं console.dir से करूँगा तो क्या हुआ तो इसको as an object मुझे print करके दिखाया चाहिए और इसकी सारी properties मैं कुछ इस तरह से देख सकता हू��
1:56
कि इसमें क्या-क्या attributes हैं क्या है functions हैं एक पल अब javascript object की तरह प्रिंट होकर आ चाहि��
2:01
तो यह बात आप लोग को मालूम होनी चाहिए, ठीक है, coming back to nodes
2:05
console.log shows the element dom tree, console.dir shows the element as an object
2:10
with its properties, ठीक है, तो उसकी properties के साथ, अगर आप लोग को देखना है
2:14
तो console.dir का इस्तेमाल करेंगे, और मैंने भी आप लोग को demo दिखा दिया, क्या difference है, ठीक है
2:18
tag name और node name की बात करते हैं देखो क्या होता है कि अगर कोई भ��
2:22
node है हमारे पास node एक element भी हो सकता है ठीक ह��
2:25
used to read tag name of an element tag name only exist for element nodes ठीक ह��
2:29
और node name defined for any type of nodes जैसे कि अगर आप लोग text nodes की बात करे��
2:34
comment nodes की बात करें तो उसमें भी आप लोगों को जो node name है वो defined होता ह��
2:48
document document document firstElement sorry firstChild
3:06
तो यहाँ पर मुझे कुछ इस तरह से text दिखाएगा ठीक है अगर मैं यहाँ पर firstChild ना करके firstElement child करू��
3:13
और इसका node name माँगू तो वो मुझे span दिखाएगा ठीक ह��
3:17
तो ये दोनों lines क्या करती है basically अगर मैं इनको console.log करवाओ यहाँ स��
3:21
ठीक है कुछ इस तरह से अगर मैं इनको console.log करवाओ तो क्या होगा document.body.firstElementChild.nodeName
3:34
अगर मैं कुछ ऐसे करूँ तो आप लोग देख सकते हो कि यहाँ पर text और span यहाँ प��
3:40
और मुझे देखने को मिलेगा सिमिलरली जो कोड़ अभी मैंने यहां पर लिखा था उसको भी मैं लिखना चाहता हूं ठीक ह��
3:45
अगर आप कुछ इस तरह से करें मैं इसी को रिप्लीगेट क्यों ना कर दूं अरे यार मेरी जब इस पर आना हो गया कीबोर्��
3:52
यार क्या चल रहा है कंट्रोल सेट उप्स उप्स उप्स या सची में क्या चल रहा है मेरे कीबोर्ड की जेड क��
4:01
अरे नगर पालिका को बुला यार सची में क्या चल रहा है यहां पर कंट्रोल सॉरी ऑल्ट शिफ्ट और बॉटम की दबाऊंग��
4:12
इस बार कंट्रोल डोट डिया लिखूंगा और मेरा काम हो जाना चाहिए और अब मैं इसको रिलोड करूंगा अगर तो कह रह��
4:21
है चाहिए तो मुझे यहां पर वाय करना पड़ेगा इसकी एक्स ऑलरेडी में डिफाइन कर दिया ठीक है कंट्रोल ऐस करूंग��
4:28
आई होप नगर पालिका को बुलाने की जरूरत ना पड़े चढ़ा समझाओ इससे समझा��
4:33
और नहीं पड़ी ठीक है टैग नेम और नोड नेम आई होप आप लोगों को सबझ पर आ गय��
4:37
अब इनर HTML और आउटर HTML को समझेंगे क्या होता है ठीक है मैं काम करूँगा चीजों को बहुत सिंपल बनाने के लिए अपनी index.html के अंदर id डाल दूँग��
4:45
id is equal to और मैं लिख दूँगा यहाँ पर first ठीक है अब मैं यहाँ पर अगर लिखूँ first.innerhtml
4:54
और उसके लिए मुझे reload करना पड़ेगा इसको कि भी मैंने डाला है इसमे��
4:58
id first तो आप देख सकते हो hey I'm span यहाँ पर print होकर आ गया ह��
5:01
जो कि इसकी inner html है अगर यहाँ पर b tag होता है यानि कि bold tag
5:06
होता है कुछ इस तरह से ठीक है और यहाँ पर high लिखा होता ह��
5:10
इस तरह से और अब मैं यहाँ पर इसकी नेटिविन मांगूं तो यह मुझे बोल्ड टैक्स भी दे देगा ठीक है आपको समझ मे��
5:19
आ गया इन अश्लील को सेट भी कर सकते हैं जैसे कि मान लो मैं यहां पर मान लो यहां पर मैं लिख जाता हूं ए��
5:26
टैलिक टैग है एम एटैलिक और आई टैक को बंद कर दो डबल कोट को बंद कर दो यहां पर देखो आप लोग टैलि��
5:33
टैक के साथ यह एच्टीएमल यहां पर आ गई है और एज एच्टीएमल यह इंसर्ट हुई कि आप देख सकते हो कि टैक्स का��
5:40
pillar dot innerHTML get set I hope clear the innerHTML property allows to get the HTML inside the element as a string
5:54
ये बात याद रखना, कि ये element nodes के लिए ही valid होती है ये चीज, ठीक है
5:59
ये मत कहना मेरे से कि text node के लिए काम नहीं कर रही, comment node के लिए काम नहीं कर रही
6:03
पर मेरे पास बताना यह कहने के लिए ठीक है वैलेट फॉर एलिमेंट नोट्स ऑनली ठीक है तो आपको जो ह��
6:12
एस्टीएमल केटिए सेट करने में मदद करती है बात कर लेते हैं ऑफिस टीमल की आउटर एस्टीएमल के अंदर पूर��
6:19
HTML बाहर की होती है यानि कि वह एलिमेंट भी आ जाएगा और उसी के साथ साथ इनर स्टेमिल भी आ जाएगी त��
6:25
मैं आप लोगों यहां पर दिखाता हूं कि अगर मैं इनर स्टेवल की जगह ऑटर स्टेवल करूं सबसे पहले गेट aç आ��
6:30
दिखाऊंगा और यहां पर आउटर इस टीम अगर मैं देखो तो वह एलेमेंट भी आ गया आप देख सकते हैं वह एलेमें��
6:37
भी आया और उसी के साथ इसके अंदर का भी कंटेंट आ गया और पैस को सेट भी कर सकता हूं मैं यह भी कह सकत��
6:43
टिव है ठीक है और अब मैं यहां पर इसको ऐसे चेंज कर सकता हूं तो आप ट्रेस्ट यह में को भी सेट कर सकता हू��
6:54
मैं ठीक है तो स्पैन आईडी इस इगल टो फर्स्ट गायब हो गया अभी मैं आपको इंस्पेक्टर जिमेंट करके दिखाओ तो देख��
7:00
लाइन को कॉपी करके यहां पर डाल देता हूं कमेंट लगाकर कमेंट लगाकर डालूंगा ठीक है ताकि आप लो��
7:12
नहीं हो जाए और यह सारा बोर्डना मैं कमेंट लगाकर डाल रहा हूं यार ठीक है उसका रीजन पता है क्या ह��
7:17
उसका reason यह है कि आप लोग confused ना हो जाएं क्योंकि आप लो��
7:21
rappel पे आएंगे फिर आपको लगेगा या नहीं पता नहीं क्या चल रहा है ठीक है मैं नहीं चाहता ऐसा हो ठीक है control slash करके मैंने पूरी क��
7:28
पूरी script को comment out कर दिया ठीक है तो आपको अभी inner इनरेश्टीमल मालूम है क्या होता है आपको मालूम है ओटर इस्टेमिल क्या होता है इनरेश्टीमल इस वैलेड ऑनल��
7:37
फॉर एलिमेंट नोट सिर्फ एलिमेंट नोट्स के लिए वैलिड होती है यह बात आपको याद रखता है फॉर अदर नोट टाइप्��
7:41
विकेश नोड वाल्यू और डेटा ठीक है आप लोग डोट डेटा कर सकते हो डोट डोट वाल्यू कर सकते हो फॉर एक्सांप��
7:47
अगर मैं आप लोगों को डॉक्यूमेंट डोट बॉडी डोट इसके लिए रिलोड कर लेता हूं अगर मैं यह पर लिखो डॉक्यूमें��
7:56
डॉट बॉडी डॉट फर्स चाइल जो कि एक टेक्स्ट नोड है अगर मैं इसका डॉट डेटा करूं तो इसके अंदर का जो कंटेंट है वो मुझे मिल जाएगा या फिर अगर मैं डॉट डेटा की जगा नोड वाल्यू कर दूं तो आप देखो उसके बाद भी मुझे कंट��
8:26
टेक्स्ट इनसाइड एलिमेंट ऑनली टेक्स्ट बाइनर्स ऑनली टैक्स अब मैं बताता हूं कि इसका क्या कमाल है अगर content
8:48
है क्योंकि ऑटोमाटिकली इसने जो है मुझे कमलीट कर दी तो देखो टेक्स्ट कंटेंड से क्या हुआ इसके अंदर क��
8:54
text आ गया, समझ रहे हो, आपको बिलकुल भी जादा दिमाग लगाने की ज़रूरत नहीं है, as a text आप पूरे page को copy कर सकते हो, ठीक है, तो कभी भी किसी भी website पर जाते हो, आपको website as a text copy करनी है, तो आप क्या करो, यह लिख सकते हो, ठीक है, console.log यह है, और आपको मिल जाएगी console म��
9:24
यह भी मैं जरा यहां पर पेस्ट कर देता हूं ठीक है कुछ इस तरह से ठीक है बढ़िया यार हिड़न प्रॉपर्टी के बारे मे��
9:35
बात करते हैं अगर आपने किसी भी एलिमेंट के ट्रिब्यूट को हिड़न कर दिया या फिर आपने कुछ इस तरह से भी अग��
9:40
लगा दिया ना मैं आपको दिखा दाया जो मिल कर लूं मैं यह चल रहा है ठीक है अगर मैंने यह लगा दिया न��
9:46
एट्रीब्यूट कुछ इस तरह से तो यह है इस पर ना आप लोगों नहीं दिखना ठीक है नहीं दिखेगा आपको देखो चला गय��
9:52
लेकिन अगर मैं इसमें जो यह लगा हुआ है मैं अगर कुछ इस तरह से कर दूं मैं अगर लिख दूं डॉलर जी डो डॉट हिडन एज एकॉल टो फirts जैसे मैं इसको रन करूंगा तो यह दिखने लग गया भी ठीक है तो इस तरह के काम की जा सकते हैं अभी हाई बोल्ड क्��
10:22
दूंगा और मैं यह ना इसको डॉलर जी नहीं करूंगा मैं फर्स्ट टॉट इडेंट इगल टू फॉल्स करूंगा ठीक ह��
10:28
फॉल्स सॉरी फॉल्स नाम की आईडी लगी हुई है ठीक है तो मैं यहां पर इसको लिख दूंगा और मैं पता है क्यों इसक��
10:37
इस तरह से कर रहा हूं मैं इसलिए कर रहा हूं कमेंट आउट ताकि आप लोग को बस सिंपली मैं चाहता हूं मिल जाए ज��
10:42
भी जवास्क्रिप्ट में ले रहा हूं इसलिए मैं कुछ इस तरह से कर रहा हूं और इस जो हिड़े नहीं एट्रिब्यूट मे��
10:47
लागा रहने देता हूं ठीक है यार मैंने कैसे प्रेस कर दिया है पता नहीं कि आप प्रेस किया मैंने मिली रैप्लीट��
10:52
बंद हो गई कि यह चल रहा है भाई कि क्या चल रहा है आज सची मैं कोई बात नहीं अब देख दो बात दो वीडिय��
11:02
बदल में मैं आपको बताना जाता हूं मैंने नोट में बहुत बढ़ीय तरीके से सारी चीजें लिखी हुई है औ��
11:06
नोट्स को डाउनलोड करें जरूर से ठीक है और प्ले लिस्ट को एक्सेस करें या क्लिक करके बुक मार्क करें या क्लि��
11:12
के सेव करें अभी के लिए इस वीडियो में इतने है गैस थैंक यह सो मच गाइस पूरा जिन इस वीडियो एंड आवल सीओ एक्स टाइ��
11:23
कर द��