JavaScriptタグの下にある複数のテキストを取得する方法

一般的に使用されるスクリプト言語として、JavaScript は Web 開発者が HTML テキストを簡単に操作するのに役立ちます。ラベルの下に複数のテキスト コンテンツを取得する必要がある場合、いくつかの単純な JavaScript メソッドとステートメントを使用してこれを実現できます。

innerHTML 属性の使用

JavaScript では、innerHTML 属性を使用して、HTML タグの下にあるテキスト コンテンツを取得できます。 innerHTML 属性は、ネストされたタグのテキスト コンテンツを含む、タグに含まれるすべてのテキストを取得できます。

たとえば、次のような HTML 構造があるとします。

<div id="container">
  <p>这是第一段文本</p>
  <p>这是第二段文本</p>
  <p>这是第三段文本</p>
</div>

次のコードを使用して、すべての p タグの下にあるテキスト コンテンツを取得できます。

var container = document.getElementById("container");
var innerText = container.innerHTML;

console.log(innerText);

出力結果

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>

ただし、innerHTML 属性はテキスト コンテンツを取得するだけでなく、タグ内の属性やイベントを含むタグ自体の要素も取得することに注意してください。テキスト コンテンツを取得するには、innerHTML 属性を最初に使用する必要があります。HTML 要素を削除することによってのみ、必要なテキストを取得できます。

innerText 属性の使用

innerHTML 属性に加えて、innerText 属性を使用して HTML タグの下のプレーン テキスト コンテンツを取得することもできます。この場合、HTML タグは無視され、のみが返されます。テキストコンテンツ部分。この属性は、現在の要素内のテキスト コンテンツのみを取得できます。その子要素のテキスト コンテンツは取得できません。

したがって、HTML タグの下にある複数のテキスト コンテンツを取得したい場合は、for ループを使用して子要素の innerText 属性を 1 つずつ取得する必要があります。例:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var innerText = "";

for (var i = 0; i < paragraphs.length; i++) {
  innerText += paragraphs[i].innerText + "
";
}

console.log(innerText);

出力結果は次のとおりです:

这是第一段文本
这是第二段文本
这是第三段文本

textContent 属性の使用

上記の 2 つの方法に加えて、textContent 属性を使用して、 HTMLタグの下のテキストコンテンツ。 innerText とは異なり、textContent 属性は、ラベル内のすべてのスペースと改行を含む、ラベルの下のすべてのテキスト ノードを取得します。

同様に、HTML タグの下にある複数のテキスト コンテンツを取得したい場合は、for ループを使用して子要素の textContent 属性を 1 つずつ取得する必要があります。例:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var textContent = "";

for (var i = 0; i < paragraphs.length; i++) {
  textContent += paragraphs[i].textContent + "
";
}

console.log(textContent);

出力結果は次のとおりです:

这是第一段文本
这是第二段文本
这是第三段文本

要約すると、JavaScript には HTML タグの下のテキスト コンテンツを取得するためのさまざまなメソッドが用意されています。必要なテキストコンテンツを取得するには、ニーズに応じて適切な方法を選択してください。

以上がJavaScriptタグの下にある複数のテキストを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。