JavaScript でクラス名によって HTML 要素を検索して操作するにはどうすればよいですか?

JavaScript でのクラスによる要素の検索

getElementById() 関数は、一意の識別子によって要素にアクセスするのに便利ですが、状況によってはクラスを使用して要素を見つける必要があります。 JavaScript にはこの目的のためのネイティブ関数が用意されていないため、代替アプローチが必要になります。

解決策の 1 つは、指定されたタグ タイプのすべての要素を取得する getElementsByTagName() メソッドを利用することです。これらの要素を反復処理し、その className プロパティを検査することで、ターゲット クラスに一致する要素を特定できます。

次のコードは、クラスに基づいて HTML 要素内のコンテンツを置換する方法を示しています。

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if ((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) {
            elems[i].innerHTML = content;
        }
    }
}

この関数では、ページ上のすべての要素を反復処理し、その className プロパティに指定された matchClass が含まれているかどうかを確認します。一致が見つかった場合、要素の内部 HTML は、提供されたコンテンツで更新されます。

JavaScript にはこの目的のための専用関数が用意されていませんが、このアプローチにより、クラスに基づいて要素を操作する方法が提供されます。

以上がJavaScript でクラス名によって HTML 要素を検索して操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。