JavaScriptでページ内の特定のクラスを持つ要素を一括で操作する方法

JavaScriptを使用して、ウェブページ内の特定のクラスを持つ要素を一括で操作する方法について紹介します。これは、特定の目的に応じてウェブページの要素を一括で変更したり、操作したりする必要がある場合に役立ちます。

コードの説明

まず、例としてページ内のすべての要素が changeImg というクラスを持つ場合を考えます。以下のJavaScriptコードを使用することで、これらの要素の内部にある画像を一括で変更することができます。

// ページ内のクラスを全て取得して、画像を変更する
const changeImgElements = document.getElementsByClassName("changeImg");

// 画像の新しいパス
const newImagePath = "./images/nav_logo.png";

// 取得した要素の数だけループ
for (let i = 0; i < changeImgElements.length; i++) {
    // 各要素のinnerHTMLを新しい画像に変更する
    changeImgElements[i].innerHTML = `<img src='${newImagePath}' alt='btheater'>`;
}

このコードでは、document.getElementsByClassName() メソッドを使用して、ページ内のすべての changeImg クラスを持つ要素を取得します。その後、取得した要素の数だけループし、それぞれの要素の内部のHTMLを新しい画像のHTMLに置き換えます。