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

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

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

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

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

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

このアプローチでは、 div 内のコンテンツ (HTML タグを含む)。ただし、div にテキストのみが含まれている場合は、このメソッドが適しています。

代わりに、「textContent」プロパティの使用を検討してください。

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

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

たとえば、次の HTML について考えてみましょう。

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

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

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

htmlContent = node.innerHTML;
// htmlContent = "Some <span class="foo">sample</span> 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)

以上がプレーンな JavaScript を使用して Div 要素からテキスト コンテンツを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。