DOM

Node.textContent プロパティ

[Edge]。→、

Node のテキスト内容（子孫も含まれる）を文字列で取得／設定します。

innerText とは異なります。

mdn： メモ： textContent と HTMLElement.innerText は混同しやすいものですが、2つのプロパティは重要な点が異なります。

構文

値

文字列、または null。

説明／mdn

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

• ノードが document または Doctype である場合、textContent は null を返します。

  メモ： 文書全体のすべてのテキストと CDATA データを取得するには、document.documentElement.textContent を使用する方法があります。

• ノードが 、コメント、、テキスト ノードの場合、textContent はそのノードの内側のテキスト、すなわち Node.nodeValue を返します。
• 他のノード タイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。）

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

innerText との違い／mdnより

Node.textContent と HTMLElement.innerText は似ているようですが、重要な違いがあります。

textContent は、<script> と <style> 要素を含む、すべての要素の内容を取得します。一方、innerText は「人間が読める」要素のみを示します。

textContent はノード内のすべての要素を返します。一方、innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。

もっと言えば、innerText は CSS のスタイルを考慮するので、innerText の値を読み取ると最新の計算されたスタイルを保証するために、再フローを起動します。（再フローは計算が重いので、可能であれば避けるべきです。）

textContent とは異なり、innerText を Internet Explorer（バージョン 11 まで）で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

innerHTML との違い／mdn

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

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

例

<SPAN id=IdTest>[SPAN要素。<B id=IdB>[B要素]</B>テキスト]</SPAN>

IdB.style.display="none";  //IdB の表示を消す。
D=IdTest.textContent;  //＝[string]：[SPAN要素。[B要素]テキスト]
DA=IdTest.innerText;   //＝[string]：[SPAN要素。テキスト]

IdB.hidden=true;  //IdB の表示を消す。
D=IdTest.textContent;  //＝[string]：[SPAN要素。[B要素]テキスト]
DA=IdTest.innerText;   //＝[string]：[SPAN要素。テキスト]

IdTest.textContent="テスト\\rテキスト<B>B要素？</B>&pound;"

IdTest.innerText="テスト\\rテキスト<B>B要素？</B>&pound;"

テスト