TextContent बनाम इनर टेक्स्ट के बीच अंतर

Question

textContentऔर innerTextजावास्क्रिप्ट में क्या अंतर है ?

क्या मैं textContentइस प्रकार उपयोग कर सकता हूं :

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

Comments

वे समान हैं, लेकिन कुछ ब्राउज़र एक और दूसरे का समर्थन करते हैं।

— नुकीले

@ बताएं कि ऐसा क्या है जो सभी ब्राउज़रों का समर्थन करता है?

— येहिया अवध

इसके बारे में एक अच्छा ब्लॉग पोस्ट

— Tyblitz

@ पॉइन्टी कृपया उस ब्लॉग पोस्ट को देखें जिसका मैंने उल्लेख किया था। आपका कथन गलत है, अंतर है।

— Tyblitz

innerTextऔर textContentनिश्चित रूप से समान नहीं हैं। नोड सामग्री में श्वेत-रिक्त स्थान होने से दो गुणों के कारण अलग-अलग सामग्री आएगी, और इसलिए brतत्वों और अन्य ब्लॉक-स्तर प्रदान किए गए वंशों की भी घटनाएँ होंगी ।

— 14

Answer 1

अन्य कोई भी उत्तर पूर्ण विवरण प्रदान करने में सफल नहीं होता है, इसलिए यह एक है। केली नॉर्टन के ब्लॉगपोस्ट में इन दोनों के बीच महत्वपूर्ण अंतर innerTextऔर textContentबहुत अच्छी तरह से रेखांकित किया गया है : इनर टेक्स्ट बनाम टेक्स्टकॉन्टेंट । नीचे आप एक सारांश पा सकते हैं:

1. innerTextगैर-मानक textContentथा , जबकि पहले मानकीकृत था।
2. innerTextरिटर्न दिखाई पाठ एक नोड में निहित है, जबकि textContentरिटर्न पूर्ण पाठ। उदाहरण के लिए, निम्न HTML पर <span>Hello <span style="display: none;">World</span></span>, innerText'Hello' textContentलौटाएगा , जबकि 'Hello World' लौटाएगा। मतभेदों की एक और पूरी सूची के लिए, http://perfectionkills.com/the-poor-misunderstood-innerText/ पर तालिका देखें (आगे 'इनरटेक्स्ट' में पढ़ना IE में काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं )।
3. नतीजतन, innerTextबहुत अधिक प्रदर्शन-भारी है: परिणाम को वापस करने के लिए लेआउट जानकारी की आवश्यकता होती है।
4. innerTextकेवल HTMLElementवस्तुओं के लिए परिभाषित किया गया है, जबकि textContentसभी Nodeवस्तुओं के लिए परिभाषित किया गया है।

textContentIE8 के लिए वर्कअराउंड में nodeValueसभी childNodesनिर्दिष्ट नोड के उपयोग पर एक पुनरावर्ती कार्य शामिल होगा , यहाँ एक पॉलीफ़िश पर एक कोशिश है:

function textContent(rootNode) {
  if ('textContent' in document.createTextNode(''))
    return rootNode.textContent;

  var childNodes = rootNode.childNodes,
      len = childNodes.length,
      result = '';

  for (var i = 0; i < len; i++) {
    if (childNodes[i].nodeType === 3)
      result += childNodes[i].nodeValue;
    else if (childNodes[i].nodeType === 1) 
      result += textContent(childNodes[i]);
  }

  return result;
}

Comments

इसके अलावा ध्यान देने योग्य: तत्वों को न्यूलाइन वर्णों में innerTextबदल देगा <br>, जबकि textContentसिर्फ उन्हें अनदेखा करेगा। तो <br>उनके (और कोई रिक्त स्थान) के बीच केवल एक तत्व के साथ 2 शब्दों का उपयोग करते समय textContent

— संक्षिप्त

फिर सेटर का उपयोग करने पर क्या कोई अंतर है? जैसे elem.textContent = 'foobar'बनामelem.innerText = 'foobar'

— फ्रैंकलिन यू

के बीच व्यवहार में एक और अंतर : innerTextऔर textContentयदि आप text-transformसीएसएस द्वारा एक तत्व को बदलते हैं , तो यह 'इनरटेक्स्ट' के परिणाम को प्रभावित करेगा, लेकिन इसका परिणाम नहीं textContent। उदाहरण के लिए: innerTextकी <div style="text-transform: uppercase;">Hello World</div>"नमस्ते दुनिया" हो जाएगा, जबकि textContent"नमस्ते दुनिया" हो जाएगा।

— कोबी

Answer 2

textContent पाठ नोड्स के लिए केवल एक ही उपलब्ध है:

var text = document.createTextNode('text');

console.log(text.innerText);    //  undefined
console.log(text.textContent);  //  text

तत्व नोड्स में, innerTextमूल्यांकन करता है <br> तत्व, जबकि textContentनियंत्रण वर्णों का मूल्यांकन करता है:

var span = document.querySelector('span');
span.innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8";
console.log(span.innerText); // breaks in first half
console.log(span.textContent); // breaks in second half

<span></span>

span.innerText देता है:

1
2
3
4 5 6 7 8

span.textContent देता है:

1234
5
6
7
8

textContentयदि सामग्री के साथ सेट किया गया था, तो नियंत्रण वर्ण (जैसे लाइन फ़ीड) के साथ तार उपलब्ध नहीं हैं innerText। दूसरा तरीका (सेट नियंत्रण वर्णों के साथ textContent), सभी वर्णों को दोनों के साथ लौटाया जाता है innerTextऔर textContent:

var div = document.createElement('div');
div.innerText = "x\ny";
console.log(div.textContent);  //  xy

Answer 3

दोनों innerTextऔर textContent2016 के रूप में मानकीकृत हैं। सभी Nodeवस्तुओं (शुद्ध पाठ नोड सहित) textContent, लेकिन केवल HTMLElementऑब्जेक्ट हैं innerText।

textContentअधिकांश ब्राउज़रों के साथ काम करते समय , यह IE8 या इससे पहले काम नहीं करता है। केवल IE8 पर काम करने के लिए इस पॉलीफ़िल का उपयोग करें। यह पॉलीफ़िल IE7 या इससे पहले के साथ काम नहीं करेगा।

if (Object.defineProperty 
  && Object.getOwnPropertyDescriptor 
  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") 
  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

यह Object.definePropertyविधि IE9 या इसके बाद के संस्करण में उपलब्ध है, हालांकि यह IE8 में केवल DOM ऑब्जेक्ट्स के लिए उपलब्ध है।

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Comments

यहां इसके लिए युक्ति भी बताई गई है: w3.org/TR/DOM-Level-3-Core/core.html इसके अलावा (बहुत पुराना) ब्राउज़र समर्थन तालिका ( webdevout.net/browser-support-dom#dom3core ) बताती है कि, यह IE9 + के लिए समर्थित है, इसलिए IE8 और पुराने के लिए, innerTextआपका मित्र है।

— geekonaut

वास्तव में, यह एक बेहतर विचार है कि या तो ie8 का समर्थन न करें या पॉलीफिल का उपयोग करें। मैंने अपने पोस्ट में पॉलीफ़िल पोस्ट किया

— रिचर्ड हैमिल्टन

जब वह समर्थन नहीं करता तो IE8 में वह पॉलीफिल कैसे काम कर सकता है Object.defineProperty()?

— नुकीले

आप अपना जवाब अपडेट क्यों नहीं करते? html.spec.whatwg.org/multipage/…

— caub

इनरटेक्स्ट के बारे में एमडीएन का एक उद्धरण यहां दिया गया है - "यह सुविधा मूल रूप से इंटरनेट एक्सप्लोरर द्वारा शुरू की गई थी, और सभी प्रमुख ब्राउज़र विक्रेताओं द्वारा अपनाए जाने के बाद औपचारिक रूप से 2016 में HTML मानक में निर्दिष्ट की गई थी।"

— चाड

Answer 4

उन लोगों के लिए जो इस सवाल को टाल गए और यहां पहुंचे। मुझे लगता है कि इस सवाल का सबसे स्पष्ट जवाब एमडीएन दस्तावेज़ में है: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent ।

आप उन सभी बिंदुओं को भूल सकते हैं जो आपको भ्रमित कर सकते हैं लेकिन 2 बातें याद रखें:

1. जब आप पाठ को बदलने की कोशिश कर रहे हैं, textContent तो आमतौर पर आप जिस संपत्ति की तलाश कर रहे हैं।
2. जब आप किसी तत्व से पाठ को हथियाने की कोशिश कर रहे हैं, innerTextतो पाठ को यह अनुमान लगाता है कि उपयोगकर्ता को कर्सर के साथ तत्व की सामग्री पर प्रकाश डाला जाएगा और फिर क्लिपबोर्ड पर कॉपी किया जाएगा। और textContentआपको सब कुछ देता है, दृश्यमान या छिपा हुआ, सहित <script>और <style>तत्व।

Answer 5

textContent अधिकांश ब्राउज़रों द्वारा समर्थित है। यह ie8 या इससे पहले समर्थित नहीं है, लेकिन इसके लिए एक पॉलीफिल का उपयोग किया जा सकता है

TextContent प्रॉपर्टी निर्दिष्ट नोड और उसके सभी वंशजों की पाठ्य सामग्री को सेट या रिटर्न करती है।

Http://www.w3schools.com/jsref/prop_node_textcontent.asp देखें

Answer 6

textContent पूर्ण पाठ लौटाता है और दृश्यता की परवाह नहीं करता है, जबकि इन्टरटेक्स्ट करता है।

<p id="source">
    <style>#source { color: red; }</style>
    Text with breaking<br>point.
    <span style="display:none">HIDDEN TEXT</span>
</p>

TextContent का आउटपुट:

#source { color: red; } Text with breakingpoint. HIDDEN TEXT

इनरटेक्स्ट का आउटपुट (ध्यान दें कि इनरटेक्स्ट को टैग के बारे में कैसे पता है <br>, और छिपे हुए तत्व को अनदेखा करता है):

Text with breaking point.

Comments

IE11 में, इनर टेक्स्ट का व्यवहार टेक्स्टकॉन्टेंट के समान है।

— सेबस्टियन

Answer 7

उन सभी अंतरों के अलावा, जिन्हें अन्य उत्तरों में नाम दिया गया था, यहाँ एक और है जिसे मैंने हाल ही में खोजा है:

भले ही innerTextसंपत्ति को 2016 के बाद से मानकीकृत कहा गया है, यह ब्राउज़रों के बीच अंतर प्रदर्शित करता है: मोज़िला यू + 200 ई और यू + 200 एफ पात्रों ("एलआरएम" और "आरएलएम") को अनदेखा innerTextकरता है, जबकि क्रोम नहीं करता है।

console.log(document.getElementById('test').textContent.length);
console.log(document.getElementById('test').innerText.length);

<div id="test">[&#x200E;]</div>

फ़ायरफ़ॉक्स 3 और 2 की रिपोर्ट करता है, क्रोम 3 और 3 की रिपोर्ट करता है।

अभी तक निश्चित नहीं है कि यह बग है (और यदि ऐसा है, तो कौन सा ब्राउज़र में) या सिर्फ उन विचित्र असंगतियों में से एक है जिनके साथ हमें रहना है।

Answer 8

इनर HTML उन HTML टैग्स को भी अंजाम देगा जो खतरनाक हो सकते हैं जो किसी भी तरह के क्लाइंट-साइड इंजेक्शन हमले जैसे DOM आधारित XSS का कारण बन सकते हैं। यहाँ कोड स्निपेट है:

<!DOCTYPE html>
<html>
    <body>
        <script>
            var source = "Hello " + decodeURIComponent("<h1>Text inside gets executed as h1 tag HTML is evaluated</h1>");  //Source
            var divElement = document.createElement("div");
            divElement.innerHTML = source;  //Sink
            document.body.appendChild(divElement);
        </script>
    </body>
</html>

यदि आप .textContent का उपयोग करते हैं, तो यह HTML टैग्स का मूल्यांकन नहीं करेगा और इसे स्ट्रिंग के रूप में प्रिंट करेगा।

<!DOCTYPE html>
<html>
    <body>
        <script>
            var source = "Hello " + decodeURIComponent("<h1>Text inside will not get executed as HTML</h1>");  //Source
            var divElement = document.createElement("div");
            divElement.textContent = source;  //Sink
            document.body.appendChild(divElement);
        </script>
    </body>
</html>

संदर्भ: https://www.scip.ch/en/?labs.20171214