menu

【JavaScript】textContentでテキストの取得と書き込み

2023年1月2日

CodeJavaScript

.textContent は、DOMのElementインターフェースのプロパティであり、ノードおよびそのすべての子ノードのテキストコンテンツを設定または取得するために使用されます。これにより、HTMLタグなしで要素のテキストのみを取得または設定できます。

.textContent の主な特性

  • 取得: 要素とその子孫のテキスト内容を取得します。
  • 設定: 要素のテキスト内容を新しいテキストで上書きします。
  • HTMLタグを無視して、テキストコンテンツだけを扱います。

例:以下のHTMLがあるとします。

<div id="myDiv">Hello <span>World</span>!</div>

//JavaScriptを使用してその内容を取得する場合:
var content = document.getElementById('myDiv').textContent;
console.log(content);  // "Hello World!"

//.textContentを使用してその内容を変更する場合:
document.getElementById('myDiv').textContent = "New content";

//HTMLの変更後:<div id="myDiv">New content</div>

.textContentはHTMLを解釈しないため、安全にテキストを設定できます(スクリプトの実行や他のリスクなし)。

.textContentと似ているプロパティに.innerTextがありますが、.innerTextはスタイルや非表示の要素を考慮するため、常に同じ結果を返すわけではありません。適切なものを状況に応じて選択することが重要です。

.textContentを使用することで、DOM要素から簡単にテキストを取得・設定できるので、日常のJavaScriptプログラミングにおいて非常に便利なプロパティです。

Follow Me!

Aji ろぐろぐみー筆者

フリーのWeb屋
詳しいプロフィールはこのページで色々書いてます。Twitterもやってます。コメント頂けると陸に上がった魚のようにピチピチ喜びます!

関連記事

関連記事はありません。

コメントはこちらからどうぞ

プライバシーポリシーはこちら
また、コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。

CAPTCHA