यह मार्गदर्शिका बताएगी कि जावास्क्रिप्ट में HTML DOM तत्व 'टेक्स्टकंटेंट' प्रॉपर्टी तक कैसे पहुंच और हेरफेर किया जाए।
सबसे पहले, HTML DOM 'textContent' प्रॉपर्टी की मूल बातें देखें।
जावास्क्रिप्ट में HTML DOM 'टेक्स्टकंटेंट' प्रॉपर्टी क्या है?
“ पाठसामग्री ” एक अंतर्निहित संपत्ति है जो किसी निर्दिष्ट तत्व या नोड के पाठ को उसके सभी वंशजों सहित सेट, पुनर्प्राप्त और संशोधित करती है। वंशज बाल तत्व हैं जैसे , , , और भी बहुत कुछ जिनका उपयोग स्वरूपण उद्देश्यों के लिए किया जाता है। 'टेक्स्टकंटेंट' प्रॉपर्टी का उपयोग करके टेक्स्ट सेट करते समय, लक्षित तत्व के वंशजों को पूरी तरह से नए टेक्स्ट से बदल दिया जाता है।
सिंटैक्स (पाठ सामग्री सेट करें)
'का उपयोग करके किसी तत्व/नोड का टेक्स्ट सेट करने का मूल सिंटैक्स पाठसामग्री 'संपत्ति नीचे लिखी गई है:
तत्व। पाठसामग्री = मूलपाठ | नोड. पाठसामग्री = मूलपाठ
उपरोक्त वाक्यविन्यास वांछित लेता है ' मूलपाठ 'एक मान के रूप में जिसे उपयोगकर्ता किसी तत्व या नोड के लिए सेट करना चाहता है।
सिंटैक्स(पाठ सामग्री प्राप्त करें)
किसी तत्व या नोड के पाठ को 'के माध्यम से वापस करने के लिए सामान्यीकृत वाक्यविन्यास' पाठसामग्री 'संपत्ति यहाँ बताई गई है:
तत्व। पाठसामग्री | नोड. पाठसामग्रीप्रतिलाभ की मात्रा: “ पाठसामग्री 'संपत्ति लौटाती है' मूलपाठ 'किसी तत्व या नोड का रिक्त स्थान के साथ लेकिन उसके आंतरिक HTML टैग के बिना।
अब 'टेक्स्टकंटेंट' प्रॉपर्टी तक पहुंचने और उसमें हेरफेर करने के लिए उपरोक्त परिभाषित सिंटैक्स का व्यावहारिक रूप से उपयोग करें।
जावास्क्रिप्ट में HTML DOM एलिमेंट 'टेक्स्टकंटेंट' प्रॉपर्टी तक कैसे पहुंचें और हेरफेर करें?
'इनरएचटीएमएल' और 'इनरटेक्स्ट' गुणों के समान, ' पाठसामग्री ” संपत्ति उपयोगकर्ताओं को वांछित तत्व के टेक्स्ट को आसानी से सेट करने, एक्सेस करने और संशोधित करने की भी अनुमति देती है। यह अनुभाग नीचे दिए गए उदाहरणों का उपयोग करके किसी तत्व पर ये सभी ऑपरेशन करता है।
उदाहरण 1: तत्व/नोड टेक्स्ट तक पहुंचने के लिए 'टेक्स्टकंटेंट' प्रॉपर्टी को लागू करना
यह उदाहरण किसी विशेष तत्व या नोड के टेक्स्ट को उसके सभी बच्चों सहित वापस करने के लिए 'टेक्स्टकंटेंट' प्रॉपर्टी लागू करता है।
HTML कोड
< डिव पहचान = 'मायडिव' मूषक के ऊपर से = 'गेटटेक्स्ट()' शैली = 'बॉर्डर: 3px सॉलिड ब्लैक; चौड़ाई: 400px; पैडिंग: 5px 5px; मार्जिन: ऑटो;' >< एच 1 > पहला शीर्षक < / एच 1 >
< एच 2 > दूसरा शीर्षक < / एच 2 >
< h3 > तीसरा शीर्षक < / h3 >
< एच 4 > चौथा शीर्षक < / एच 4 >
< h5 > पाँचवाँ शीर्षक < / h5 >
< h6 > छठा शीर्षक < / h6 >
< / डिव >
HTML कोड की उपरोक्त पंक्तियों में:
- “ 'myDiv' आईडी वाला टैग एक div तत्व बनाता है जिसे निम्नलिखित गुणों बॉर्डर, चौड़ाई, पैडिंग (ऊपर और नीचे, बाएँ और दाएँ) और मार्जिन के साथ स्टाइल किया जाता है। यह ' भी संलग्न करता है मूषक के ऊपर से 'घटना जो' का आह्वान करती है पाठ प्राप्त करें() जब उपयोगकर्ता उस पर माउस घुमाता है तो यह कार्य करता है।
- div के अंदर, सभी निर्दिष्ट शीर्षक (h1,h2,h3,h4,h5, और h6) टैग अपने निर्दिष्ट स्तरों के अनुसार शीर्षक तत्वों को सम्मिलित करते हैं।
जावास्क्रिप्ट कोड
< लिखी हुई कहानी >
फ़ंक्शन getText ( ) {
एलेम् था = दस्तावेज़। getElementById ( 'मायडिव' ) ;
चेतावनी ( तत्व। पाठसामग्री ) ;
}
लिखी हुई कहानी >ऊपर लिखे जावास्क्रिप्ट कोड ब्लॉक में:
- ' नामक फ़ंक्शन को परिभाषित करें पाठ प्राप्त करें() ”।
- इस फ़ंक्शन के अंदर, 'elem' वेरिएबल 'लागू होता है' getElementById() '' div तत्व को उसकी आईडी के माध्यम से एक्सेस करने की विधि।
- “ चेतावनी() ' विधि एक अलर्ट बॉक्स बनाती है जो ' का उपयोग करती है पाठसामग्री ” संपत्ति अपने सभी आश्रितों के साथ मूल div के पाठ को वापस करने के लिए।
उत्पादन
नीचे दिया गया आउटपुट एक अलर्ट बॉक्स को पॉप अप करता है जो div तत्व की टेक्स्ट सामग्री दिखाता है:
उदाहरण 2: किसी तत्व टेक्स्ट सामग्री को उसके वंशजों सहित बदलने के लिए 'टेक्स्टकंटेंट' प्रॉपर्टी को लागू करना
यह उदाहरण दिखाता है कि कैसे 'टेक्स्टकंटेंट' प्रॉपर्टी किसी तत्व के टेक्स्ट को संशोधित करते समय उसके सभी बच्चों को बदल देती है।
HTML कोड
< केंद्र >
< h1 आईडी = 'मेरा सिर' क्लिक पर = 'संशोधित पाठ ()' < बी > यह बी > है < अवधि > शीर्षक < अवधि > < मैं > तत्व मैं > एच 1 >
केंद्र >कोड की उपर्युक्त पंक्तियों में:
- “ 'टैग संलग्न' के साथ स्तर 1 का एक शीर्षक तत्व जोड़ता है क्लिक पर 'घटना जो' का आह्वान करती है संशोधितपाठ() जब उपयोगकर्ता उस पर क्लिक करता है तो यह कार्य करता है।
- शीर्षक तत्व में ' ', ' ', और ' इसके वंशजों के रूप में टैग करता है। ' ' टैग का उपयोग संलग्न स्ट्रिंग को बोल्ड करने के लिए किया जाता है, '' टैग का उपयोग बिना किसी स्टाइलिंग प्रॉपर्टी के दिए गए स्ट्रिंग पर कोई स्टाइल लागू करने के लिए किया जाता है, और ' ' टैग का उपयोग प्रदर्शित करने के लिए किया जाता है। इटैलिक के रूप में निर्दिष्ट स्ट्रिंग।
जावास्क्रिप्ट कोड
< लिखी हुई कहानी >
कहाँ h1 = दस्तावेज़। getElementById ( 'मेरा सिर' ) ;
सांत्वना देना। लकड़ी का लट्ठा ( एच 1 ) ;
फ़ंक्शन संशोधित टेक्स्ट ( ) {
h1. पाठसामग्री = 'लिनक्सहिंट में आपका स्वागत है!' ;
सांत्वना देना। लकड़ी का लट्ठा ( एच 1 )
}
लिखी हुई कहानी >उपरोक्त जावास्क्रिप्ट कोड में:
- “h1” वेरिएबल “का उपयोग करता है” दस्तावेज़.getElementById() 'शीर्षक तत्व को उसकी निर्दिष्ट आईडी के माध्यम से एक्सेस करने की विधि।
- “ कंसोल.लॉग() ” विधि अपनी सामग्री को बदलने से पहले कंसोल पर एक्सेस किए गए शीर्षक तत्व को प्रदर्शित करती है।
- फ़ंक्शन का नाम ' संशोधितपाठ() ' का उपयोग करता है पाठसामग्री ''प्राप्त किए गए शीर्षक तत्व के पाठ को संशोधित करने के लिए संपत्ति।
- अंतिम 'कंसोल.लॉग()' विधि संशोधन के बाद फिर से 'h1' मान प्रदर्शित करती है।
उत्पादन
कंसोल स्पष्ट रूप से दिखाता है कि दिए गए शीर्षक तत्व के सभी बच्चों को उस पर क्लिक करने पर नए निर्दिष्ट पाठ से बदल दिया गया है:
उदाहरण 3: एलिमेंट के चाइल्ड के टेक्स्ट को संशोधित करने के लिए 'टेक्स्टकंटेंट' प्रॉपर्टी को लागू करना
यह उदाहरण विशिष्ट तत्व के बच्चे के पाठ को संशोधित करने के लिए 'textContent' संपत्ति का उपयोग करता है।
HTML कोड
< डिव पहचान = 'मायडिव' शैली = 'बॉर्डर: 3px सॉलिड ब्लैक; चौड़ाई: 400px; पैडिंग: 5px 5px; मार्जिन: ऑटो;' >
< केंद्र >
< बटन पहचान = 'बीटीएन' मूषक के ऊपर से = 'चेंजटेक्स्ट()' > पुराना बटन < / बटन >
< / केंद्र >
< / डिव >इस परिदृश्य में:
- 'Div' तत्व में एक 'बटन' तत्व होता है जो 'की मदद से बनाया जाता है' <बीटीएन> ' टैग।
- बटन तत्व में आगे एक निर्दिष्ट आईडी और एक ' शामिल है मूषक के ऊपर से 'घटना जो' कहती है परिवर्तनपाठ() जब माउस इसके ऊपर घूमता है तो यह कार्य करता है।
जावास्क्रिप्ट कोड
< लिखी हुई कहानी >
मूल तत्व था = दस्तावेज़। getElementById ( 'मायडिव' ) ;
वर लक्ष्य = दस्तावेज़। getElementById ( 'बीटीएन' ) ;
मुझे ढूंढ रहा था = अभिभावकतत्व. रोकना ( लक्ष्य ) ;
अगर ( अभिभावकतत्व. रोकना ( लक्ष्य ) == सत्य ) {
सांत्वना देना। लकड़ी का लट्ठा ( मुझे ढूढ़ें ) ;
फ़ंक्शन चेंजटेक्स्ट ( ) {
लक्ष्य। पाठसामग्री = 'नया बटन' ;
}
} अन्य {
सांत्वना देना। लकड़ी का लट्ठा ( 'मौजूद नहीं होना' )
}
लिखी हुई कहानी >उपरोक्त कोड स्निपेट में:
- “parentElement” वेरिएबल “लागू होता है” getElementById() 'पैरेंट div तत्व तक पहुँचने की विधि। 'लक्ष्य' वैरिएबल अपनी आईडी का उपयोग करके जोड़े गए बटन तत्व को लाने के लिए 'getElementById()' विधि का भी उपयोग करता है।
- “find_me” वेरिएबल “का उपयोग करता है” रोकना() यह जांचने की विधि कि लक्षित बटन तत्व div का बच्चा है या नहीं। यह विधि वापस आ जाएगी' सत्य 'हाँ' के लिए अन्यथा 'गलत'।
- “ यदि नहीं तो 'कथन एक कोड ब्लॉक को परिभाषित करता है।
- यदि लक्षित तत्व मूल तत्व की संतान है, तो ' परिवर्तनपाठ() 'फ़ंक्शन' के माध्यम से अपना टेक्स्ट बदल देगा पाठसामग्री ' संपत्ति। अन्यथा, 'अन्य' कोड ब्लॉक 'का उपयोग करके निर्दिष्ट संदेश प्रदर्शित करने के लिए निष्पादित होगा कंसोल.लॉग() ' तरीका।
उत्पादन
कंसोल एक दिखाता है ' सत्य 'बूलियन मान जो बटन तत्व को सत्यापित करता है वह दिए गए div का बच्चा है और फिर उस पर माउस घुमाने पर इसका टेक्स्ट बदल जाता है:
टेक्स्टकंटेंट, इनरटेक्स्ट और इनरHTML प्रॉपर्टी के बीच अंतर?
आम तौर पर, ' पाठसामग्री ', ' आंतरिक पाठ ', और ' आंतरिक HTML गुण किसी तत्व या नोड के टेक्स्ट को सेट करने और प्राप्त करने के तरीके से निपटते हैं। हालाँकि, ये गुण कुछ कारकों के आधार पर एक दूसरे से भिन्न हैं। यह खंड उन सभी के बीच मुख्य अंतरों पर प्रकाश डालता है:
शर्तें 'पाठ सामग्री' 'आंतरिक पाठ' 'आंतरिक HTML' वापसी प्रकार यह किसी तत्व का टेक्स्ट उसके सभी बच्चों (फ़ॉर्मेटिंग टैग), सीएसएस छिपे हुए टेक्स्ट और स्पेस सहित लौटाता है। यह किसी तत्व के HTML टैग वापस नहीं करता है। यह लक्षित HTML तत्व की पाठ्य सामग्री को उसके सभी बच्चों (फ़ॉर्मेटिंग टैग) के साथ लौटाता है। यह