টেক্সট কনটেন্ট বনাম ইনটারটেক্সটের মধ্যে পার্থক্য

Question

জাভাস্ক্রিপ্ট এর মধ্যে textContentএবং পার্থক্য কি innerText?

আমি কি textContentনিম্নলিখিত হিসাবে ব্যবহার করতে পারি :

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

Comments

সেগুলি একই, তবে কিছু ব্রাউজার একটি এবং অন্যকে সমর্থন করে others

— পয়েন্টি

@ পয়েন্টে সমস্ত ব্রাউজার সমর্থন করে এমন একটি কি?

— ইয়াহিয়া আবাদ

এটি সম্পর্কে একটি ভাল ব্লগ পোস্ট

— টাইব্লিটজ

@ পয়েন্টটি দয়া করে আমি নির্দেশিত ব্লগ পোস্টটি দেখুন। আপনার বক্তব্য ভুল, একটি পার্থক্য আছে।

— টাইব্লিটজ

innerTextএবং textContentস্থিরভাবে এক নয়। নোডের সামগ্রীতে হোয়াইট-স্পেস ইভেন্টগুলি দুটি বৈশিষ্ট্যকে আলাদা আলাদা সামগ্রী দেবে এবং তাই brউপাদান এবং অন্যান্য ব্লক-স্তরের রেন্ডার বংশধরের ঘটনা ঘটবে ।

— amn

Answer 1

অন্য কোনও উত্তর পুরো ব্যাখ্যা সরবরাহ করতে সফল হয় নি, এই কারণেই এটি। মধ্যে কী পার্থক্য innerTextএবং textContentখুব ভাল রূপরেখা আছে কেলি নর্টন এর ব্লগপোস্টটিকে: innerText বনাম textContent । নীচে আপনি একটি সারাংশ খুঁজে পেতে পারেন:

1. innerTextএটি মানহীন ছিল, যদিও textContentআগে এটি মানক করা হয়েছিল।
2. innerTextফেরৎ প্রোফাইল টেক্সট একটি নোড অন্তর্ভুক্ত, যখন textContentআয় পূর্ণ পাঠ্য। উদাহরণস্বরূপ, নিম্নলিখিত এইচটিএমএলে <span>Hello <span style="display: none;">World</span></span>, innerText'হ্যালো' textContentফিরবে , যখন 'হ্যালো ওয়ার্ল্ড' ফিরে আসবে। পার্থক্যগুলির আরও সম্পূর্ণ তালিকার জন্য, http://perfectionkills.com/the-poor-misferences ਸਮਝ-innerText/ এ টেবিলটি দেখুন ( 'ইনারটেক্সট' এ আরও পড়ার জন্য IE এ কাজ করে তবে ফায়ারফক্সে নয় )।
3. ফলস্বরূপ, innerTextঅনেক বেশি পারফরম্যান্স-ভারী: ফলাফলটি ফিরিয়ে আনতে লেআউটের তথ্য প্রয়োজন।
4. innerTextকেবলমাত্র HTMLElementবস্তুর textContentজন্য সংজ্ঞায়িত করা হয় , তবে সমস্ত Nodeবস্তুর জন্য এটি সংজ্ঞায়িত হয় ।

textContentআইই 8-এর জন্য একটি কার্যপ্রণালী- নির্দিষ্ট নোডের সমস্তটি ব্যবহার 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>তাদের মধ্যে কেবলমাত্র একটি 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বেশিরভাগ ব্রাউজারের সাথে কাজ করার সময় , এটি আইই 8 বা তার আগের কাজ করে না। কেবলমাত্র আইই 8 তে কাজ করার জন্য এই পলিফিলটি ব্যবহার করুন। এই পলিফিল আইই 7 বা তার আগের কাজ করবে না।

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 বা আপে availabe তবে এটা 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 এছাড়াও (খুব পুরানো) ব্রাউজার সমর্থন টেবিল ( ওয়েবদেবটনেট / ব্রাউজার-সমর্থন- ডোম টোডম3कोर ) পরামর্শ দেয়, এটি IE9 + এর জন্য সমর্থিত, তাই আই 8 এবং তার চেয়ে বেশি বয়সীদের innerTextজন্য আপনার বন্ধু।

— geekonaut

আসলে, IE8 সমর্থন না করা বা পলিফিল ব্যবহার না করা ভাল ধারণা। আমি আমার পোস্টে পলিফিল পোস্ট করেছি

— রিচার্ড হ্যামিল্টন

আইলি 8 সমর্থন করে না তখন কীভাবে সেই পলিফিল কাজ করতে পারে Object.defineProperty()?

— পয়েন্টি

আপনি কেন আপনার উত্তর আপডেট করবেন না? এইচটিএমএল.স্পেক.সেটওয়গ.আর.গু.মুটিপেজ /

— কৌক

ইন্টার্নটেক্সট সম্পর্কে এমডিএন-এর একটি উদ্ধৃতি এখানে দেওয়া আছে - "এই বৈশিষ্ট্যটি মূলত ইন্টারনেট এক্সপ্লোরার দ্বারা প্রবর্তিত হয়েছিল এবং সমস্ত বড় ব্রাউজার বিক্রেতাদের দ্বারা গৃহীত হওয়ার পরে 2016 সালে এটি এইচটিএমএল স্ট্যান্ডার্ডে আনুষ্ঠানিকভাবে নির্দিষ্ট করা হয়েছিল।"

— চাদ

Answer 4

যারা এই প্রশ্নটি গুগল করেছিলেন এবং এখানে এসেছেন তাদের জন্য। আমি মনে করি এই প্রশ্নের সর্বাধিক সুস্পষ্ট উত্তর এমডিএন ডকুমেন্টে রয়েছে: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent ।

আপনাকে বিভ্রান্ত করতে পারে এমন দুটি পয়েন্ট আপনি ভুলে যেতে পারেন তবে দুটি জিনিস মনে রাখতে পারেন:

1. আপনি যখন পাঠ্যটি পরিবর্তন করার চেষ্টা করছেন তখন textContentসাধারণত সেই সম্পত্তি যা আপনি খুঁজছেন।
2. আপনি যখন কোনও উপাদান থেকে পাঠ্য গ্রহন করার চেষ্টা করছেন, innerTextব্যবহারকারী যখন পাঠ্যটি কার্সর দিয়ে উপাদানটির বিষয়বস্তু হাইলাইট করে এবং তারপরে ক্লিপবোর্ডে অনুলিপি করেন তবে পাঠ্যটি তার কাছাকাছি আসে। এবং textContentআপনাকে দৃশ্যমান বা লুকানো, সহ <script>এবং <style>উপাদানগুলি দেয়।

Answer 5

টেক্সট কনটেন্ট বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত। এটি ie8 বা তার আগে সমর্থিত নয়, তবে পলিফিল এটির জন্য ব্যবহার করা যেতে পারে

টেক্সট কনটেন্ট সম্পত্তি নির্দিষ্ট নোড এবং তার সমস্ত বংশধরের পাঠ্য সামগ্রী সেট করে বা প্রদান করে।

Http://www.w3schools.com/jsref/prop_node_textcontent.asp দেখুন

Answer 6

টেক্সট কনটেন্ট পুরো পাঠ্য ফেরত দেয় এবং দৃশ্যমানতার বিষয়ে চিন্তা করে না, যখন ইনট্রেক্সট করে।

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

পাঠ্য সামগ্রীটির আউটপুট:

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

ইনারটেক্সটের আউটপুট (নোটগুলি কীভাবে ট্যাগগুলির বিষয়ে সচেতন <br>, এবং লুকানো উপাদানটিকে উপেক্ষা করে তা নোট করুন ):

Text with breaking point.

Comments

আইই ১১-তে, ইন্টার্নটেক্সটের আচরণ পাঠ্য কনটেন্টের মতোই।

— সেবাস্তিয়ান

Answer 7

অন্যান্য উত্তরে নামকরণ করা সমস্ত পার্থক্য বাদে, আমি এখানে সম্প্রতি আবিষ্কার করেছি আরও একটি:

যদিও innerTextসম্পত্তিটি ২০১ 2016 সাল থেকে প্রমিত করা হয়েছে বলে জানা গেছে, এটি ব্রাউজারগুলির মধ্যে পার্থক্য প্রদর্শন করে: মজিলা ইউ + 200 ই এবং ইউ + 200 এফ অক্ষরগুলিকে ("lrm" এবং "rlm") উপেক্ষা করে innerText, যখন ক্রোম হয় না।

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

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

ফায়ারফক্স 3 এবং 2, ক্রোম 3 এবং 3 রিপোর্ট করেছে reports

এখনও নিশ্চিত নয় যে এটি কোনও বাগ (এবং যদি তাই হয় তবে কোন ব্রাউজারে) বা আমাদের যে বাঁচতে হবে সেই উদ্বেগজনক অসঙ্গতিগুলির মধ্যে একটি one

Answer 8

ইনারএইচটিএমএল এমনকি এইচটিএমএল ট্যাগগুলিও কার্যকর করে যা ডিওএম ভিত্তিক এক্সএসএসের মতো ক্লায়েন্ট-সাইড ইনজেকশন আক্রমণের ফলে বিপজ্জনক হতে পারে। কোড স্নিপেট এখানে:

<!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>

আপনি যদি টেক্সট কনটেন্ট ব্যবহার করেন তবে এটি এইচটিএমএল ট্যাগগুলি মূল্যায়ন করে স্ট্রিং হিসাবে মুদ্রণ করবে না।

<!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