div のすべてのスパンを動的に読み取るにはどうすればよいですか?

Web ページを作成する場合、HTML 要素には複数のネストされた HTML 要素を含めることができます。場合によっては、開発者は特定の HTML 要素の HTML 要素を読み取る必要があるかもしれません。この例では、div 要素のすべての spam 要素を読み取り、その内容を抽出する必要があります。

このチュートリアルでは、JavaScript を使用して div 要素のすべてのスパンのコンテンツを読み取り、それを再度フォーマットされた方法で Web ページに追加する方法を学習します。

＃＃＃文法＃＃＃

ユーザーは JavaScript を使用して、次の構文に従って div 要素のすべての範囲を動的に読み取ることができます。

リーリー

上記の構文では、タグ名を通じて「span」要素を取得し、すべてのspan要素を1つずつ読み取ります。

例 1

以下の例では、ID「myDIv」を含む div 要素を作成します。さらに、内容の異なる 5 つのスパン要素を追加しました。

JavaScript では、div 要素の ID を使用してアクセスします。その後、タグ名によって div 要素の子であるすべてのspan要素にアクセスします。次に、for ループを使用して、span 要素の配列を反復処理し、各 scan 要素の内部 HTML を取得します。

出力では、span 要素の内容を確認できます。

リーリー

例 2

以下の例では、「content」に等しい ID を持つ div 要素を作成します。 div要素には子要素として「

」「

」「"」要素がランダムな順序で複数含まれていますが、ここではspan要素のみを抽出します。

JavaScriptでは、div要素と子span要素にアクセスします。その後、span 要素の内容を読み取り、その内容をリストに追加するだけです。

リーリー

例 3

この例では、spanタグに果物の名前を、divタグにその説明を追加しています。したがって、親 div には、span 要素と div 要素が子要素として含まれます。

JavaScript では、「children」属性を使用して div 要素のすべての子要素を取得します。その後、すべての子要素を反復処理します。 for ループでは、「tagName」属性を使用して、現在の要素が「span」要素であるかどうかを確認します。存在する場合、その内容を読み取り、リストに追加します。それ以外の場合は、繰り返しを続けます。

リーリー ＃＃＃結論は＃＃＃

JavaScript を使用して div 要素のすべてのspan要素を動的に読み取る方法を学びました。最初の 2 つの例では、すべてのspan要素にアクセスし、それらを反復処理しました。 3 番目の例では、div 要素のすべての子要素を反復処理し、反復中に span 要素を識別します。

以上がdiv のすべてのスパンを動的に読み取るにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。