Node.textContent

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

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

値

文字列または null です。値は場面によります。

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

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

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

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

innerText との違い

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

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

innerHTML との違い

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>

仕様書

Specification
DOM Standard
# dom-node-textcontent

ブラウザーの互換性

BCD tables only load in the browser

関連情報