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

JavaScriptでgetElementsByClassName()を正しくループ処理する方法

JavaScriptで要素を正しく反復処理（ループ処理）するには、document.getElementsByClassName() を使用します。getElementsByClassName() はDocumentインターフェースのメソッドの一つで、指定したクラス名を持つすべての要素をHTMLCollectionとして返します。

getElementsByClassName()の基本的な使い方

戻り値は配列に似たコレクション（HTMLCollection）であるため、通常のfor文を使って各要素に順番にアクセスできます。

以下は、同じクラス名を持つ複数のdiv要素を反復処理して、それぞれの内容をコンソールに出力するサンプルコードです。

サンプルコード

<!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>
<body>
<div class="demo">最初のJavaScriptプログラム</div>
<div class="demo">これは2番目のプログラムです</div>
<div class="demo">これは3番目のプログラムです</div>
<script>
    var className = document.getElementsByClassName('demo');
    for(var index = 0; index < className.length; index++){
        console.log(className[index].innerHTML);
    }
</script>
</body>
</html>

実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（例：index.html）」として保存し、ファイルを右クリックします。VS Codeエディタを使用している場合は、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

上記のコードを実行すると、ブラウザのコンソールに以下の出力が表示されます。

最初のJavaScriptプログラム
これは2番目のプログラムです
これは3番目のプログラムです

補足：forEachなど他の反復方法について

getElementsByClassName()が返すHTMLCollectionは本来の配列ではないため、そのままではforEach()を使えません。モダンな書き方としては、Array.from()やスプレッド構文で配列化してから反復処理する方法も便利です。

// Array.from()を使った例
Array.from(document.getElementsByClassName('demo')).forEach(function(el){
    console.log(el.innerHTML);
});

// スプレッド構文を使った例
[...document.getElementsByClassName('demo')].forEach(el => console.log(el.innerHTML));

用途に応じて、従来のfor文とこれらのモダンな手法を使い分けるとよいでしょう。

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

    Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した