ノードとその子孫のテキスト内容を取得、または設定します。

文法

var text = element.textContent;
element.textContent = "何らかのサンプルテキスト";

• textContentは、要素がdocument、documentのtype、 またはnotation(記号?)であれば、nullを返します。 ドキュメント全体のテキストとCDATAデータを取得するには、 document.documentElement.textContentを使用します。
• もし、ノードがCDATAセクション、コメント、処理命令、テキストノードのいずれかの場合、 textContentはそのノード内部のテキスト(nodeValue)を返します。
• その他のノードのタイプでは、textContentはコメントと処理命令のノードを除く各子ノードの、 textContent属性の値を連結したものを返します。 ノードが子を持たない場合は、空文字列になります。
• ノード上でこのプロパティを設定すると、そのノードの子は全て削除され、 与えられた値の単一のテキストノードに置き換えられます。

innerTextとの違い

Internet Explorerでは、element.innerTextが実装されています。 処理の意図するところは、ほとんど同じで少し違いがあるだけです。

• textContentが<script>と<style>要素を含む全ての要素の内容を取得する一方、 IE固有のプロパティであるinnerTextはこれを行いません。
• また、innerTextはstyleを認識し、hiddenの要素のテキストを返しませんが、textContentはこれを返します。
• innerTextはCSSスタイルを認識し、リフロー(再描画)を行いますが、textContentはこれを行いません。

innerHTMLとの違い

innerHTMLは、その名前が示すようにHTMLを返します。 多くの場合、要素内のテキストの取得または書き込みには、innerHTMLが使用されますが、 textContentが代わりに使用されるべきです。 何故なら、テキストはHTMLとして解析されないため、パフォーマンスが向上し、 更にはXSS攻撃を避ける事にも繋がります。

例

// 下記のHTML断片(fragment)が与えられています:
//   <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";
// divAのHTMLは下記の通りになります:
//   <div id="divA">This is some text</div>

注意事項

仕様

• textContent

 Back to top