Node.textContent

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

構文

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

説明

• 要素が document、document type、または notation の場合、textContent は null を返します。文書全体のテキストと 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);
       }
     }
   );
  })();
}

ブラウザ実装状況

仕様

関連項目

• More on differences between innerText and textContent (ブログの投稿)