textContentとinnerTextの違い

違いは何であるtextContentとinnerTextJavaScriptでは？

textContent次のように使用できますか？

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

他の答えはどれも完全な説明を提供することに成功していないため、これがこれです。主な違いinnerTextとはtextContent非常にうまく概説されているのTextContent対のinnerText：ケリーNortonのブログ投稿。以下に概要を示します。

1. innerTexttextContent以前は標準化されていましたが、非標準でした。
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/の表を参照してください（「innerText」をさらに読むと、IEでは機能しますが、Firefoxでは機能しません）。
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;
}

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いる場合、制御文字（たとえば、改行）を含む文字列はで使用できません。もう1つの方法（制御文字をで設定textContent）では、すべての文字がinnerTextとの両方で返されtextContentます。

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

innerText＆textContentは両方とも2016年の時点で標準化されてい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以降で使用できますが、IEオブジェクトでのみ使用できます。

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

この質問をググって、ここに来た人のために。この質問に対する最も明確な答えは、MDNドキュメントhttps://developer.mozilla.org/en-US/docs/Web/API/Node/textContentにあると思います。

あなたはあなたを混乱させるかもしれないすべてのポイントを忘れることができますが、2つのことを覚えておいてください：

1. テキストを変更しようとしているとき、textContent通常はが探しているプロパティです。
2. ある要素からテキストを取得しようとしているときにinnerText、ユーザーが要素のコンテンツをカーソルで強調表示してクリップボードにコピーした場合に表示されるテキストを概算します。そして、textContentあなたのすべてを、表示または非表示、などの与え<script>および<style>要素を。

textContentはほとんどのブラウザでサポートされています。ie8以前ではサポートされていませんが、ポリフィルを使用できます

textContentプロパティは、指定されたノードとそのすべての子孫のテキストコンテンツを設定または返します。

http://www.w3schools.com/jsref/prop_node_textcontent.aspを参照してください

textContentは全文を返し、可視性を気にしませんが、innerTextはそうします。

<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

innerTextの出力（innerTextがのようなタグを認識し、<br>非表示の要素を無視することに注意してください）：

Text with breaking point.

他の回答で名前が付けられたすべての違いは別として、ここに私が最近発見したもう1つの違いがあります。

innerTextプロパティは2016年から標準化されていると言われていますが、ブラウザーによって違いがあります。MozillaはでU + 200EとU + 200F文字（「lrm」と「rlm」）を無視しますがinnerText、Chromeでは無視します。

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

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

Firefoxレポート3および2、Chromeレポート3および3。

これがバグなのか（そうであれば、どのブラウザーのバグなのか）、あるいは私たちが一緒に暮らさなければならない、風変わりな非互換性の1つにすぎないのか、まだわかりません。

innerHTMLは、DOMベースのXSSのようなあらゆる種類のクライアント側インジェクション攻撃を引き起こす危険なHTMLタグでさえ実行します。これがコードスニペットです。

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