JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素の順序に基づいてタグの内部HTMLを変更する方法

ページ内の複数の同じクラスを持つ要素に対して、順序に基づいてテキストや内部HTMLを一括変更したい場合があります。そのようなときは、document.querySelectorAll() を使うと簡単に実現できます。

querySelectorAll() は、指定したセレクターに一致するすべての要素を NodeList として取得できるため、ループ処理と組み合わせることで、各要素に連番などの値を順番に設定することが可能です。

実装例

以下は、ボタンをクリックすると3つの段落（<p>タグ）のテキストが、クリックされた順序に基づいて番号付きのテキストに変更されるサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <p class="numberDemo">My Paragraph</p>
   <p class="numberDemo">My Paragraph</p>
   <p class="numberDemo">My Paragraph</p>
  <button id="orderDemo">クリックして段落に順序を付ける</button>
</body>
<script>
    document.getElementById('orderDemo')
        .addEventListener('click', function (e) {
            var allHTMLValues = document.querySelectorAll('.numberDemo');
            var counter = 1;
            for (temp of allHTMLValues) {
                temp.innerText = 'この段落は ' + (counter) + ' 番目です';
                counter = counter + 1;
            }
        });
</script>
</html>

コードの解説

  • document.querySelectorAll('.numberDemo')：クラス名 numberDemo を持つすべての <p> 要素をまとめて取得します。
  • for...of ループ：取得した各要素を先頭から順に処理します。DOM上の出現順に処理されるため、そのまま順序付けに利用できます。
  • innerText の書き換え：カウンター変数 counter を使って、「1番目」「2番目」といった連番付きテキストを各要素に設定します。

プログラムの実行方法

上記のコードを「index.html」などの名前で保存してください。Visual Studio Codeを使用している場合は、ファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上ですぐに動作を確認できます。

実行結果

プログラムを実行すると、最初は3つの段落すべてに「My Paragraph」と表示されます。

ボタンをクリックすると、各段落のテキストが次のように順序に基づいた内容へと変化します。

  • 1つ目の段落：「この段落は 1 番目です」
  • 2つ目の段落：「この段落は 2 番目です」
  • 3つ目の段落：「この段落は 3 番目です」

このように、querySelectorAll() とループ処理を組み合わせることで、複数のタグの内部HTMLやテキストを簡単かつ効率的に操作できます。リストへの連番付与や動的なコンテンツ更新など、さまざまな場面で応用できるテクニックなので、ぜひ覚えておきましょう。

  1. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要

  2. JavaScript：ネストされた配列をもとに入れ子の順序なしリスト（ul）を作成するには？

    例えば、次のように文字列と配列が混在したネストされた配列があるとします。const arr = [ Value 1, [Inner value 1, Inner value 2, Inner value 3, Inner value 4], Value 2, Value 3, Value 4, Value 5, Value 6 ];このような任意のネストされた配列を受け取り、その構造に合わせてHTMLの順序なしリスト（ul）へ変換するJavaScriptプログラムを作成してみましょう。ここで注意すべきポイントはただ一つ、生成されるulのネスト構造が、元の配列のネスト構造と完全に