textContent は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。
メモ: textContent と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは重要な点が異なります。
let text = someNode.textContent someOtherNode.textContent = string
文字列または {{jsxref("null")}}
textContent の値は状況によります。
textContent は {{jsxref("null")}} を返します。
document.documentElement.textContent を使用する方法があります。textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。
Node.textContent と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。
textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。
innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 textContent は値が HTML として解析されないので性能が良くなります。
さらに、textContent を使用することで {{glossary("Cross-site_scripting", "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>
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} |
{{Compat("api.Node.textContent")}}
innerText and textContent (ブログ投稿)