Node.textContent

textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。

let text = someNode.textContent
someOtherNode.textContent = string

文字列または null

textContent の値は状況によります。

• ノードが document または Doctype である場合、 textContent は null を返します。
  メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
• ノードが CDATA セクション、コメント、処理命令ノード (en-US)、 テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち Node.nodeValue を返します。
• 他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

Node.textContent と HTMLElement.innerText の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

• textContent は、 <script> と <style> 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
• textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。
  • もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために 再フロー を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
• textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

Element.innerHTML は、その名が示すとおり HTML を返します。時に、 innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 textContent は値が HTML として解析されないので性能が良くなります。

さらに、textContent を使用することで XSS 攻撃を防ぐことができます。

以下のような HTML の断片があります。

<div id="divA">This is <span>some</span> text!</div>

... textContent を使用して、要素のテキストの内容を取得することができます。

let text = document.getElementById('divA').textContent;
// 変数 text の値は 'This is some text!' となります。

... また、要素のテキストを設定します。

document.getElementById('divA').textContent = 'This text is different!';
// divA の HTML は次のようになります。
// <div id="divA">This text is different!</div>

• HTMLElement.innerText
• Element.innerHTML
• More on differences between innerText and textContent (ブログ投稿)