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

構文

var text = element.textContent;
element.textContent = "this is some sample text";

説明

  • 要素が document、document type、または notation の場合、textContentnull を返します。文書全体のテキストと CDATA データを取得するためには、以下のように書けます:document.documentElement.textContent
  • ノードが CDATA セクション、コメント、処理命令ノード、またはテキストノードの場合、textContent はこのノードの内側のテキスト(nodeValue)を返します。
  • 他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。ノードが子を持たない場合、これは空文字列になります。
  • ノードにこのプロパティに値を設定すると、そのノードのすべての子供が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

innerText との違い

Internet Explorer は element.innerText を導入しました。これは同じものを意図しますが、次の違いがあります:

  • textContent は、<script><style> 要素を含む、すべての要素の内容を取得する一方で、IE 特有のプロパティ innerText はそうではありません。
  • innerText は要素のスタイルに対して知覚的で、非表示の要素のテキストを返さない一方で、textContent は返します。
  • innerText は CSS スタイリングに知覚的なためリフローを起こし、一方 textContent はそうなりません。
  • textContent とは異なり、Internet Explorer(バージョン 11 まで)の innerText を変更することは、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します(よって、他の要素または同じ要素にノードをもう一度挿入することは不可能です)。

innerHTML との違い

innerHTML は、その名が示すとおり HTML を返します。 多くの場合、要素内のテキストを取得または書き込むために、innerHTML を使用します。しかしながら、 textContent はパフォーマンスを向上させる場合があります。テキストが HTML として解析されないためです。さらに、textContent を使用することで XSS 攻撃を防ぐことができます。

// 以下のような HTML の断片があります:
//   <div id="divA">This is <span>some</span> text</div>

// テキスト内容を取得する:
var text = document.getElementById("divA").textContent;
// 変数 text には "This is some text" が入ります。

// テキスト内容を設定する:
document.getElementById("divA").textContent = "This is some text";
// HTML の divA はこのようになります:
//   <div id="divA">This is some text</div>

Polyfill for IE8

if (Object.defineProperty 
  && Object.getOwnPropertyDescriptor 
  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") 
  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

仕様

仕様 状態 コメント
DOM
Node.textContent の定義
現行の標準 DOM4 からの変更なし
DOM4
Node.textContent の定義
廃止された  
Document Object Model (DOM) Level 3 Core Specification
Node.textContent の定義
廃止された 導入

関連項目

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, kkas, orisano, momdo, fscholz, jislotz
最終更新者: Uemmra3,