textContent
は Node
のプロパティで、ノードおよびその子孫のテキストの内容を表します。
メモ: textContent
と HTMLElement.innerText
は混同しやすいものですが、2つのプロパティは重要な点が異なります。
構文
let text = someNode.textContent someOtherNode.textContent = string
値
文字列または null
説明
textContent
の値は状況によります。
- ノードが
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
を 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>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
DOM Node.textContent の定義 |
現行の標準 |
ブラウザーの互換性
BCD tables only load in the browser