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

.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プログラミングにおいて非常に便利なプロパティです。

応援クリックよろしくお願いします！