TextContent ile InteriorText arasındaki fark

JavaScript arasındaki textContentve innerTextiçindeki fark nedir ?

textContentAşağıdaki gibi kullanabilir miyim :

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

Diğer cevapların hiçbiri tam açıklamayı sağlamada başarılı değil, dolayısıyla bu cevap. Kelly Norton'un blog gönderisindeinnerText ve arasındaki temel farklar textContentçok iyi özetlenmiştir : innerText ve textContent . Aşağıda bir özet bulabilirsiniz:

1. innerTextstandart değildi, ancak textContentdaha önce standardize edildi.
2. innerTextdöner görünür bir düğüm içinde ihtiva metin ise textContentgeri dönüş tam metni. Örneğin, aşağıdaki HTML <span>Hello <span style="display: none;">World</span></span>, innerTextolurken, 'Merhaba' dönecektir textContent'Merhaba Dünya' dönecektir. Farklılıkların daha eksiksiz bir listesi için, http://perfectionkills.com/the-poor-misunderstood-innerText/ adresindeki tabloya bakın ( 'innerText' bölümünde daha fazla okuma IE'de çalışır, ancak Firefox'ta değildir ).
3. Sonuç olarak, innerTextperformans açısından çok daha ağırdır: sonucu döndürmek için düzen bilgisi gerektirir.
4. innerTextyalnızca HTMLElementnesneler textContentiçin tanımlanırken, tüm Nodenesneler için tanımlanır .

textContentIE8 için bir geçici çözüm , belirtilen nodeValuetüm childNodesdüğümlerde kullanılan özyinelemeli bir işlevi içerir, işte bir çoklu doldurmada bir deneme:

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;
}

textContent metin düğümleri için kullanılabilen tek seçenektir:

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

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

Eleman düğümlerinde, kontrol karakterlerini innerTextdeğerlendirirken <br> elemanlarını textContentdeğerlendirir:

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 verir:

1
2
3
4 5 6 7 8

span.textContent verir:

1234
5
6
7
8

textContentİçerik ile ayarlanmışsa, kontrol karakterli dizeler (örn. Satır beslemeleri) ile kullanılamaz innerText. Diğer yol (set kontrol karakterleri ile textContent), tüm karakterlerin hem döndürülür innerTextve textContent:

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

Hem innerText& textContenttamamı 2016 tarihi itibariyle standardize edilir Node(saf metin düğümlerinin dahil) nesneler var textContent, fakat sadece HTMLElementnesnelerin var innerText.

İken textContentçoğu tarayıcı ile çalışır, IE8 veya önceki çalışmaz. Bu çoklu dolguyu yalnızca IE8 üzerinde çalışması için kullanın. Bu çoklu dolgu, IE7 veya önceki sürümlerde çalışmayacaktır.

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.definePropertyYöntem DOM nesneleri yalnızca için ancak IE8'de mevcuttur, IE9 veya yukarı şimdilerde.

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

Bu soruyu googledip buraya gelenler için. Bu sorunun en net cevabının MDN belgesinde olduğunu hissediyorum: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent .

Kafanızı karıştırabilecek tüm noktaları unutabilirsiniz, ancak 2 şeyi unutmayın:

1. Metni değiştirmeye çalıştığınızda textContent, genellikle aradığınız özelliktir.
2. Bir öğeden metin almaya çalıştığınızda innerText, kullanıcının öğenin içeriğini imleçle vurgulayıp ardından panoya kopyalarsa alacağı metne yaklaşır. Ve textContentsize <script>ve <style>öğeleri dahil olmak üzere görünür veya gizli her şeyi verir .

textContent çoğu tarayıcı tarafından desteklenir. İe8 veya öncesi tarafından desteklenmez, ancak bunun için bir polyfill kullanılabilir

TextContent özelliği, belirtilen düğümün metin içeriğini ve tüm alt öğelerini ayarlar veya döndürür.

Bkz. Http://www.w3schools.com/jsref/prop_node_textcontent.asp

Diğer cevaplarda belirtilen tüm farklılıkların yanı sıra, işte yakın zamanda keşfettiğim bir tane daha:

Olsa innerTextmülkiyet 2016 yılından beri standardize edilmiş sahip olmak gibi söylenir, bu tarayıcılar arasındaki farkları sergiler: Mozilla U + 200E ve U + 200F'ı karakterler içinde ( "LRM" ve "rlm") yok sayar innerText, Chrome yapmasa da.

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

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

Firefox 3 ve 2'yi, Chrome 3 ve 3'ü rapor eder.

Bunun bir hata mı (ve eğer öyleyse, hangi tarayıcıda) yoksa yaşamak zorunda olduğumuz tuhaf uyumsuzluklardan sadece biri olduğundan henüz emin değilim.

textContent tam metin döndürür ve görünürlüğü önemsemez, oysa innerText yapar.

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

TextContent Çıktısı:

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

İnnerText çıktısı (innerText'in <br>gizli öğe gibi etiketleri nasıl bildiğine ve göz ardı ettiğine dikkat edin ):

Text with breaking point.

innerHTML, DOM tabanlı XSS ​​gibi her türlü istemci tarafı enjeksiyon saldırısına neden olabilecek tehlikeli olabilecek HTML etiketlerini bile çalıştırır. İşte kod pasajı:

<!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 kullanırsanız, HTML etiketlerini değerlendirmez ve Dize olarak yazdırmaz.

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

Referans: https://www.scip.ch/en/?labs.20171214