Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- HTML要素.textContent
HTML要素.textContent対応: DOM Level 3（2004）
HTML要素内のテキストを取得、または設定します。HTMLタグは解釈されず、純粋なテキストとして扱われます。
構文
// テキストを取得します。 var text = element.textContent; // テキストを設定します。 element.textContent = "新しいテキスト";
サンプルコード
<p id="sample">こんにちは<span>世界</span></p>
var el = document.querySelector("#sample");
// HTMLタグを無視してテキストのみを取得します。
console.log(el.textContent); // 『こんにちは世界』と出力されます。
// テキストを設定します。HTMLタグは文字列としてそのまま表示されます。
el.textContent = "新しい<span>テキスト</span>";
// 画面には「新しいテキスト」とそのまま表示されます。
実行結果
テキストの取得時、HTMLタグは無視されてテキストのみが連結されます。
console.log(el.textContent); // 『こんにちは世界』と出力されます。
テキストの設定後、HTMLは以下のように変化します。
<!-- 実行前 --> <p id="sample">こんにちは<span>世界</span></p>
<!-- textContent設定後 --> <p id="sample">新しい<span>テキスト</span></p>
実行前は「世界」が『<span>』タグで囲まれていましたが、『HTML要素.textContent』で設定した実行後は、HTMLタグが文字列としてそのまま画面に表示されます。
textContentとinnerHTMLの違い
| プロパティ | 概要 |
|---|---|
| textContent | HTMLタグを解釈しません。テキストのみを扱うため安全です。ユーザーが入力した値を表示する場合に適しています。 |
| innerHTML | HTMLタグを解釈します。HTMLを動的に挿入したい場合に使用しますが、ユーザーの入力値をそのまま挿入すると、悪意のあるスクリプトが実行されてしまう危険性があります。XSSについては『HTML要素.innerHTML』のページを参照してください。 |
概要
『HTML要素.textContent』はHTML要素のテキスト内容を取得・設定するためのプロパティです。取得時には子要素のタグをすべて無視し、純粋なテキストのみを連結して返します。
設定時にHTMLタグを含む文字列を代入しても、タグはそのまま文字列として表示され、HTMLとして解釈されることはありません。この性質があるため、ユーザーが入力した値を画面に表示する場合には『HTML要素.innerHTML』よりも『HTML要素.textContent』の方が安全です。
HTMLを含む内容を動的に挿入したい場合は『HTML要素.innerHTML』を使用してください。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする