Node: textContent プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

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

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

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

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

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

innerText との違い

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

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

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

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

innerHTML との違い

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

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

最初は HTML の断片です。

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

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

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

また、要素のテキストを設定するには、次のようにします。

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

仕様書

Specification
DOM
# dom-node-textcontent

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textContent
Can be set with TrustedScript instances in HTMLScriptElement.
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

関連情報