Node.textContent

概要

そのノードおよびすべての子孫の全テキスト内容を取得したり設定したりします。

構文

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

説明

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

innerTextとの違い

Internet Explorerはelement.innerTextを導入しました。これはtextContentと大体同じようなものですが、いくつかの違いがあります：

• textContentは<script>と<style>を含むすべての要素の内容を取得することに気をつけてください。 ほとんどIE特有のプロパティであるinnerTextはそうではありません。
• innerTextは要素のスタイルに対して知覚的で、隠された要素のテキストを返さないでしょう。一方textContentは返すでしょう。
• innerTextはCSSスタイリングに対して知覚的なので、描画の再計算を引き起こすでしょう。一方textContentはそうではないでしょう。

innerHTMLとの違い

innerHTMLはその名が示すとおりHTMLの断片を返します。要素の中のテキストを読み書きするためにinnerHTMLを使用する場面はかなり頻繁に見受けられます。代わりにtextContentを使うべきでしょう。なぜならテキストの処理がなされないためにおそらくはより良いパフォーマンスが得られるからです。さらに、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>

ブラウザ実装状況

仕様

• textContent