Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

HTML要素.innerText対応: HTML5（IE起源→標準化）

HTML要素の表示テキストを取得・設定するプロパティです。CSSで非表示にされたテキストは取得されないため、画面に実際に表示されている内容だけを扱います。

構文

// 表示テキストを取得します。
var text = element.innerText;

// テキストを設定します。
element.innerText = "新しいテキスト";

サンプルコード

<div id="box">
	<p>表示されるテキスト</p>
	<p style="display: none;">非表示のテキスト</p>
	<span>もうひとつのテキスト</span>
</div>

var box = document.querySelector("#box");

// innerText は画面に表示されているテキストのみを取得します。
console.log(box.innerText);
// 『表示されるテキスト』と『もうひとつのテキスト』が取得されます。
// 非表示のテキストは含まれません。

// textContent はCSSの表示状態に関係なくすべてのテキストを取得します。
console.log(box.textContent);
// 『表示されるテキスト』『非表示のテキスト』『もうひとつのテキスト』が取得されます。

// テキストを設定します。子要素はすべて置き換えられます。
box.innerText = "新しいテキスト";

実行結果

// innerText の結果
box.innerText;
// "表示されるテキスト
// もうひとつのテキスト"

// textContent の結果
box.textContent;
// "\n\t表示されるテキスト\n\t非表示のテキスト\n\tもうひとつのテキスト\n"

テキスト設定後のHTMLは以下のように変化します。

<!-- 実行前 -->
<div id="box">
	<p>表示されるテキスト</p>
	<p style="display: none;">非表示のテキスト</p>
	<span>もうひとつのテキスト</span>
</div>

<!-- innerText設定後 -->
<div id="box">新しいテキスト</div>

innerTextとtextContentの違い

プロパティ	概要
innerText	画面に表示されているテキストのみを返します。CSSで非表示にされたテキストは含まれず、改行は『<br>』タグやブロック要素の境界を反映します。レイアウトの再計算が発生するため、パフォーマンスへの影響があります。
textContent	CSSの表示状態に関係なく、すべてのテキストノードの内容を返します。HTMLソースの構造どおりに空白や改行も含まれます。レイアウトの再計算が発生しないため、処理が高速です。

概要

『HTML要素.innerText』はHTML要素の表示テキストを取得・設定するプロパティです。『HTML要素.textContent』と似ていますが、『HTML要素.innerText』はCSSで非表示にされたHTML要素のテキストを含まず、画面に実際に表示されている内容だけを返すという違いがあります。

『HTML要素.innerText』はレイアウト情報を参照するため、呼び出すたびにブラウザがレイアウトの再計算を行います。ループ内で大量のHTML要素に対して繰り返し呼び出すとパフォーマンスが低下する場合があるため、表示状態を考慮する必要がなければ『HTML要素.textContent』を使用する方が効率的です。

テキストを設定する際は『HTML要素.innerText』も『HTML要素.textContent』も同じように、既存の子要素をすべて置き換えてテキストノードを設定します。HTMLタグは文字列としてそのまま表示されるため、HTMLとして解釈させたい場合は『HTML要素.innerHTML』を使用してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス