Node: textContent プロパティ

値

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

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

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

• ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、textContent はそのノードの内側のテキスト、すなわち Node.nodeValue を返します。

• 他のノード型の場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。）

innerText との違い

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

• textContent は、<script> と <style> 要素を含む、すべての要素の中身を取得します。一方、innerText は「人間が読める」要素のみを示します。
• textContent はノード内のすべての要素を返します。一方、innerText はスタイルを反映し、「非表示」の要素のテキストは返しません。
  • もっと言えば、innerText は CSS のスタイルを考慮するので、innerText の値を読み取ると最新の計算されたスタイルを保証するために再フローを起動します。（再フローは計算が重いので、可能であれば避けるべきです。）

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>

仕様書

ブラウザーの互換性

関連情報

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