इनर टेक्स्ट बनाम इनरएचटीएमएल बनाम लेबल बनाम टेक्स्ट बनाम टेक्स्ट कॉन्टेंट बनाम आउटर टेक्स्ट

124

मेरे पास एक ड्रॉपडाउन सूची है जो जावास्क्रिप्ट द्वारा आबाद है।

लोड पर दिखाने के लिए डिफ़ॉल्ट मान क्या होना चाहिए, यह तय करते हुए, मैंने महसूस किया कि निम्नलिखित गुण बिल्कुल समान मूल्यों को दर्शाते हैं:

innerText
innerHtml
label
text
textContent
outerText

मेरा अपना शोध उनमें से कुछ के बीच बेंच मार्किंग परीक्षण या तुलना दिखाता है, लेकिन सभी नहीं।

मैं अपने स्वयं के सामान्य ज्ञान का उपयोग कर सकता हूं और 1 या दूसरे का चयन कर सकता हूं क्योंकि वे एक ही परिणाम प्रदान करते हैं, लेकिन, मैं चिंतित हूं कि यह एक अच्छा विचार नहीं है यदि डेटा को बदलना था।

मेरे निष्कर्ष हैं:

innerText मान दिखाएगा और किसी भी HTML स्वरूपण को अनदेखा करता है जिसे शामिल किया जा सकता है
innerHTML मान दिखाएगा और किसी भी HTML स्वरूपण को लागू करेगा
labelऐसा ही प्रतीत होता है innerText, इसलिए मैं अंतर नहीं देख सकता
textप्रतीत होता है, innerTextलेकिन jQuery के शॉर्टहैंड संस्करण के समान ही है
textContentके रूप में ही प्रकट होता है, innerTextलेकिन स्वरूपण रखता है (जैसे \n)
outerText के रूप में ही प्रतीत होता है innerText

मेरा शोध मुझे केवल इतना दूर ले जा सकता है क्योंकि मैं केवल वही परीक्षण कर सकता हूं जो मैं सोच सकता हूं या जो प्रकाशित हुआ है उसे पढ़ सकता हूं, क्या कोई पुष्टि कर सकता है कि क्या मेरा शोध सही है और यदि इसके बारे में कुछ विशेष है labelऔर outerText?

javascript html dom

— MyDaftQuestions
स्रोत

11

क्रॉस-ब्राउज़र अंतर के कारण पाठ को एक्सेस करने के कई अलग-अलग तरीके हैं। यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो आपको .text()एक तत्व की पाठ सामग्री प्राप्त करने के लिए उपयोग करना चाहिए , क्योंकि यह अधिकतम क्रॉस-ब्राउज़र समर्थन प्रदान करेगा।

— JLRishe

2

developer.mozilla.org/en-US/docs/Web/API/…

— JLRishe

101

से MDN :

Internet Explorer ने element.innerText पेश किया। यह अंतर बहुत हद तक वैसा ही है [जैसा कि textContent] कुछ अंतरों के साथ:

ध्यान दें कि जबकि TextContent में सभी तत्वों, सहित <script>और <style>तत्वों की सामग्री मिलती है, जिनमें से ज्यादातर समान IE- विशिष्ट गुण, इनरटेक्स्ट, नहीं करता है।

इनरटेक्स्ट भी शैली से अवगत है और छिपे हुए तत्वों के पाठ को वापस नहीं करेगा, जबकि टेक्स्टकॉन्टेंट करेगा।

जैसा कि इन्टरटेक्स्ट को सीएसएस स्टाइलिंग के बारे में पता है, यह एक रिफ्लो को ट्रिगर करेगा, जबकि टेक्स्टकॉन्टेंट नहीं होगा।

तो innerTextसीएसएस द्वारा छिपाया गया पाठ शामिल नहीं होगा, लेकिन textContentहोगा।

जैसा कि इसके नाम से संकेत मिलता है, इनर HTML HTML लौटाता है। अक्सर एक तत्व के भीतर पाठ को पुनः प्राप्त या लिखने के लिए, लोग इनर HTML का उपयोग करते हैं। इसके बजाय textContent का उपयोग किया जाना चाहिए। क्योंकि टेक्स्ट को HTML के रूप में पार्स नहीं किया गया है, इसलिए इसके बेहतर प्रदर्शन की संभावना है। इसके अलावा, यह एक XSS हमले वेक्टर से बचा जाता है।

मामले में आप कि याद किया, मुझे इसे और अधिक स्पष्ट रूप दोहराएँ: क्या नहीं का उपयोग .innerHTMLजब तक आप विशेष रूप से एक तत्व के अंदर डालने के लिए HTML करने का इरादा है और आवश्यक सावधानियों ले लिया है सुनिश्चित करने के लिए कि HTML आप डालने कर रहे हैं दुर्भावनापूर्ण सामग्री नहीं होनी चाहिए। यदि आप केवल पाठ सम्मिलित करना चाहते हैं, का उपयोग करें .textContentया यदि आपको IE8 और पहले का समर्थन करने की आवश्यकता है, तो बीच .textContentऔर बंद करने के लिए सुविधा पहचान का उपयोग करें .innerText।

एक मुख्य कारण यह है कि इतने सारे अलग-अलग गुण हैं कि विभिन्न ब्राउज़रों के मूल रूप से इन गुणों के लिए अलग-अलग नाम थे, और उन सभी के लिए अभी भी पूर्ण क्रॉस-ब्राउज़र समर्थन नहीं है। यदि आप jQuery का उपयोग कर रहे हैं, तो आपको .text()क्रॉस-ब्राउज़र अंतर को सुचारू करने के लिए डिज़ाइन किया गया है।

दूसरों में से कुछ के लिए: outerHTMLमूल रूप से एक ही है innerHTML, सिवाय इसके कि इसमें उस तत्व का प्रारंभ और अंत टैग शामिल हैं जो इसके अंतर्गत आता है। मैं बिल्कुल भी वर्णन खोजने के लिए प्रतीत नहीं कर सकता outerText। मुझे लगता है कि शायद एक अस्पष्ट विरासत संपत्ति है और इससे बचा जाना चाहिए।

— JLRishe
स्रोत

3

उस डॉक्टर की सलाह के साथ समस्या यह in order to retrieve or write text within an element, people use innerHTML. textContent should be used insteadहै कि textContent IE 8 द्वारा समर्थित नहीं है, जो अभी भी काफी व्यापक उपयोग में है क्योंकि यह संस्करण विंडोज 7 के साथ बंडल है। और फ़ायरफ़ॉक्स इनरटेक्स्ट का समर्थन नहीं करता है । इसलिए जबकि आंतरिक HTML उद्देश्य के लिए आदर्श रूप से अनुकूल नहीं है, इसमें बेहतर क्रॉस-ब्राउज़र विश्वसनीयता है।

— आदि इनबार

5

@ अदिइनबार यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो सही काम यह है कि फीचर डिटेक्शन का उपयोग बीच .textContent- बीच में बंद .innerTextकरने के लिए, या jQuery जैसी किसी चीज का उपयोग करने के लिए करें जो इन ब्राउज़र अंतरों को सुचारू करता है।

— JLRishe

1

इस स्पष्टीकरण के लिए बहुत बहुत धन्यवाद! मैं चार्ट दिखाने के लिए फ्लोट का उपयोग कर रहा हूं और यह एफएफ में नहीं दिखा रहा था क्योंकि एफएफ टेक्स्टकॉन्टेंट का उपयोग करता है। जब मैं tickFormatter का उपयोग करता था तो इनरटेक्स्ट हमेशा अपरिभाषित था।

— रेनहाइडर

1

@bvl आप textContentHTML टैग के साथ उपयोग नहीं कर सकते । यदि आपको HTML सम्मिलित करने की आवश्यकता है, तो आप या तो .innerHTMLHTML नोड्स का उपयोग करेंगे या निर्माण करेंगे document.createElement(), आदि

— JLRishe

4

सुरक्षा: गलत उपयोग innerHTML(इसके विपरीत textContent) आपके आवेदन पर XSS (क्रॉस-साइट स्क्रिप्टिंग) हमलों के लिए दरवाजा खोल सकता है। यदि DOM के माध्यम से डाली जा रही सामग्री पर innerHTMLपूरी तरह से भरोसा नहीं किया जाता है, तो एक हमलावर <script>किसी उपयोगकर्ता या व्यवस्थापक के प्राधिकरण स्तर के तहत आपके आवेदन को प्रमाणित करने के लिए एक तत्व का उपयोग कर सकता है। सभी हमले, जैसे अजीब दिखने वाले हमले <img src="x.x" onerror="alert('Hacked!');"/>और चुपके के असंख्य, प्रभावी रूप textContentसे खतरनाक के बजाय इस संदर्भ में उपयोग करने से नष्ट हो जाते हैं innerHTML।

— चेसमॉस्कल

8

ड्रॉपडाउन सूची में Optionवस्तुओं का एक संग्रह शामिल है , इसलिए आपको .textसंपत्ति का उपयोग तत्व के शाब्दिक प्रतिनिधित्व का निरीक्षण करने के लिए करना चाहिए , अर्थात

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

btw,

.textप्रतीत होता है, .innerTextलेकिन JQuery के शॉर्टहैंड संस्करण के समान है

यह सही नहीं है; प्रॉपर्टी एक्सेस वर्जन है, $(element).text()जबकि jQuery संस्करण element.textहै।

— जैक
स्रोत

5

JLRishe के अन्यथा उत्कृष्ट उत्तर के लिए परिशिष्ट:

इनरटेक्स्ट और आउटरटेक्स्ट दोनों का कारण इनर HTML और आउटरएचटीएमएल के साथ समरूपता के लिए है। यह महत्वपूर्ण हो जाता है जब आप संपत्ति को सौंपते हैं।

मान लीजिए कि आपको eHTML कोड वाला एक तत्व मिला है <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

— गुमनाम
स्रोत

2

textContent प्रारूप नहीं होगा (\ n)

— हरिहरन
स्रोत

1

यदि आप विशिष्ट ब्राउज़रों को लक्षित कर रहे हैं तो ब्राउज़र संगतता http://www.quirksmode.org/dom/html/ देखें । क्योंकि ऐसा लगता है कि वे सभी चीजों को करने का अपना तरीका है। यही कारण है कि यदि आप चारों ओर फील नहीं करना चाहते हैं तो JQuery .text () ( http://api.jquery.com/text/ ) का उपयोग करना बेहतर है ।

— nywooz
स्रोत

0

textऔर labelअतिरिक्त रिक्त स्थान हटा दें। ड्रॉपडाउन में विकल्पों की क्वेरी करते समय मुझे ये परिणाम मिले:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"

— जय जय
स्रोत