Node.textContent

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 は返します。
  • textContentとは異なり、Internet Explorer(バージョン11まで)の innerText を変更することは、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します(よって、他の要素または同じ要素にノードをもう一度挿入することは不可能です)。

innerHTMLとの違い

innerHTMLは、その名が示すとおり HTML を返します。 多くの場合、要素内のテキストを取得または書き込むために、innerHTML を使用します。代わりに textContent を使用すべきです。テキストはHTMLとして解析されないため、パフォーマンスが向上する可能性があります。さらに、これは 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);
       }
     }
   );
  })();
}

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1+ 2 9 9.64 (これ以前の可能性あり) 3 (これ以前の可能性あり)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート
Basic support ? ? ? ? ?

仕様

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

関連項目

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

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