Webページを動的に操作する際、特定のクラス名を持つ要素を対象に操作を行いたいことはよくあります。今日は、JavaScriptを使用して指定したクラス名を持つ要素を簡単に取得する方法を紹介します。
基本の取得メソッド getElementsByClassName()
最も一般的に使用される方法は、document.getElementsByClassName()メソッドです。このメソッドを使用すると、指定されたクラス名を持つすべての要素を取得することができます。
html
<div class="sample">テスト1</div> <div class="sample">テスト2</div> <div class="sample">テスト3</div>
JavaScript
// "sample"というクラス名を持つ要素をすべて取得
var elements = document.getElementsByClassName('sample');
// 取得した要素の数を表示
console.log(elements.length); // 3
// 各要素のテキスト内容を表示
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].textContent);
}
NodeListと配列
getElementsByClassName()は、NodeListというオブジェクトを返します。これは、生のリストであり、ドキュメントに対して動的に更新される特性があります。しかし、このNodeListはJavaScriptの通常の配列とは異なります。そのため、Arrayのメソッド（例：forEach）を直接使用することはできません。
しかし、NodeListを配列に変換することで、これらの配列メソッドを活用することができます。
var elements = document.getElementsByClassName('sample');
Array.from(elements).forEach(function(element) {
console.log(element.textContent);
});
よくある質問（FAQ）
Q. getElementsByClassNameとquerySelectorAllの違いは何ですか？
A.
getElementsByClassName()はHTMLCollectionを返し、DOM変更が自動的に反映されます（ライブコレクション）。querySelectorAll()はNodeListを返し、取得時点のスナップショットです（静的）。querySelectorAllはCSSセレクタが使えるため柔軟性が高く、現代では主にquerySelectorAllが使われます。Q. 複数のクラスを同時に持つ要素を取得するにはどうすればよいですか？
A.
querySelectorAll(".class1.class2")でclass1とclass2の両方を持つ要素を取得できます（スペースなし）。getElementsByClassName("class1 class2")でも同様に取得できます（スペース区切り）。Q. クラス名が途中一致する要素を取得することはできますか？
A. 完全一致のクラス名だけが対象で、部分一致は直接対応していません。
querySelectorAll("[class*='partial']")で属性値部分一致ができますが、これはクラス属性の文字列検索です。クラス名のパターンマッチが必要な場合はquerySelectorAll(“*”)で全取得後、classListでフィルタする方法があります。まとめ
JavaScriptでのDOM操作は、Webページを動的にする上で非常に重要です。特定のクラス名を持つ要素を効果的に取得・操作することで、ユーザーエクスペリエンスを向上させることができます。今回紹介したgetElementsByClassName()メソッドを活用して、ウェブページの操作をさらに柔軟に行いましょう。