textContent

テキストコンテント（DOM操作）

意味テキストの取得・設定

textContentとは？

textContentプロパティは、指定された要素のテキスト内容を取得または設定するためのプロパティです。HTMLタグは含まれません。

textContentの具体的な使い方

textContentを使用して要素のテキスト内容を取得・設定する例

<button onclick='updateTextContent()'>テキスト更新</button>
<button onclick='getTextContent()'>テキスト取得</button>
<div id='content'>初期テキスト</div>

<script>
function updateTextContent() {
  let element = document.getElementById('content');
  element.textContent = '新しいテキストコンテンツ';
  alert('テキスト内容を更新しました');
}

function getTextContent() {
  let element = document.getElementById('content');
  alert('現在のテキスト内容: ' + element.textContent);
}
</script>

この例では、textContentを使用してテキストの取得と設定を行います。「テキスト更新」ボタンをクリックすると、div要素のテキストが更新されます。「テキスト取得」ボタンをクリックすると、現在のテキスト内容がアラートで表示されます。

textContentに関するよくある質問

Q. textContentとinnerHTMLの違いは？

A. textContentはテキストのみを扱い、HTMLタグを解釈しません。一方、innerHTMLはHTMLタグを解釈します。textContentの方がXSS攻撃のリスクが低く、単純なテキスト操作に適しています。

Q. textContentは空白を保持しますか？

A. はい、textContentは要素内のすべての空白（スペース、改行など）を保持します。これは、CSSのwhite-space属性の影響を受けずに、元のテキストの構造を維持します。

Q. textContentは性能面で有利ですか？

A. はい、textContentはinnerHTMLよりも高速です。textContentは単純にテキストノードを操作するだけですが、innerHTMLはHTMLを解析してDOMを再構築する必要があるため、より多くのリソースを消費します。

textContentが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのtextContentやcreateElement()、querySelector()、previousSibling、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。