プレーン JavaScript を使用して Div 要素からテキスト コンテンツを取得する

「value」プロパティを使用して div 内のテキストを取得しようとしましたの場合、「未定義」が返されるという問題が発生しました。純粋な JavaScript を使用してテキスト コンテンツを正常に抽出するには、次のアプローチを利用できます。

「value」プロパティは主に、div 要素ではなく、input 要素で使用されます。 div のテキスト コンテンツにアクセスするには、「innerHTML」または「textContent」プロパティのいずれかを利用する必要があります。

「innerHTML」プロパティの使用:

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}

このアプローチでは、HTML タグを含む div 内のコンテンツ全体が取得されます。ただし、div にテキストのみが含まれている場合は、この方法が適しています。

あるいは、「textContent」プロパティの使用を検討してください。

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}

「textContent」プロパティは、HTML タグを除いて、div 内のテキスト コンテンツのみを返します。このオプションは、混合コンテンツを含む可能性のある div を扱う場合に特に便利です。

たとえば、次の HTML を考えてみましょう:

  Some sample text.

「innerHTML」プロパティを使用すると、次の値が返されます。

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some sample text."

ただし、「textContent」プロパティを利用すると次の結果が得られます:

textContent = node.textContent;
// textContent = "Some sample text."

詳細と使用例については、次のサイトで提供されている包括的なドキュメントを参照してください。 MDN:

• [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
• [innerHTML](https ://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)