更新日:
【JavaScript】 getElementsByClassNameメソッドについて徹底解説！
getElementsByClassName()メソッドはWebページから特定のクラス名を持つ要素を全て取得するメソッドです。
getElementsByClassName()とは
getElementsByClassName()メソッドはWebページから特定のクラス名を持つ要素を全て取得するメソッドです。
基本的な書き方
getElementsByClassName()メソッドは、Webページの中から特定の複数の要素を取得するために使用されます。そのため、Webページのソースコードの情報が必要です。JavaScriptにはdocumentという特別なオブジェクトが用意されています。このdocumentオブジェクトは、ブラウザが読み込んだ全てのソースコードの情報を持っています。したがって、documentオブジェクトに対してgetElementsByClassName()メソッドを使うことで、特定の複数の要素を取得することができます。
1
const elements = document.getElementsByClassName('クラス名')
このように引数に取得する要素のクラス名を指定します。取得した要素は定数や変数に代入して使用します。共通する要素を複数取得できるため、特定の複数の要素に対し、共通の処理を行いたいときに便利なメソッドです。
getElementById()との違い
getElementsByClassName()メソッドがクラス名から要素を取得するのに対し、要素のidを指定して要素を取得するのがgetElementById()メソッドです。idはHTMLの中で一意の値のため、特定の一つの要素を確実に取得するときに便利なメソッドです。
querySelectorAll()との違い
querySelectorAll()メソッドはCSSセレクタを指定して要素を取得するメソッドです。引数に.クラス名とクラスセレクタ名を渡すことで、一致するクラス名が付与された要素を全て取得することができます。ただ、getElementsByClassName()メソッドがこの後解説するHTMLコレクションとして取得するのに対し、querySelectorAll()メソッドはNodeListとして要素を取得するという点で異なります。
取得する要素は同じなので、クラス名から要素を取得する際はgetElementsByClassName()メソッドを使った方がパフォーマンスは高くなります。
HTMLコレクションとは
getElementsByClassName()メソッドは複数の要素を取得するため、配列のような特徴を持ったHTMLコレクションとして要素を取得します。配列ではないため、mapやforEachといった配列メソッドは使えませんが、要素の数を取得するlengthやインデックスを使って要素にアクセスすることは可能です。
またHTMLコレクションはライブコレクションといい、要素が変更されると自動的にその変更が反映されるという特徴があります。例えば、新しい要素が追加されたり削除されたりすると、その変更がリアルタイムで反映されます。
1
2
3
4
5
6
7
8
9
10
const items = document.getElementsByClassName('item');
console.log(items.length);
// 初期の要素数（例として1）
const newItem = document.createElement('div');
newItem.className = 'item';
document.body.appendChild(newItem);
console.log(items.length);
// 新しい要素が追加された後の要素数（1つ増えたので2になる）
それに対し、querySelectorAll()メソッドはNodeListとして複数の要素を取得します。
querySelectorAll()メソッドを使って取得したNodeListはHTMLコレクションと違い静的コレクションとなり、最初に取得したときの状態を保持するため、要素が変更されたとしても反映されないという特徴があります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const classNameItems = document.getElementsByClassName('item');
const querySelectorAllItems = document.querySelectorAll('.item');
// 追加前の要素数
console.log(classNameItems.length); // 初期の要素数（例として1）
console.log(querySelectorAllItems.length); // 初期の要素数（例として1））
// 新しい要素を1つ追加
const newItem = document.createElement('div');
newItem.className = 'item';
document.body.appendChild(newItem);
// 追加後の要素数
console.log(classNameItems.length); // 新しい要素が追加された後の要素数（1つ増えたので2になる）
console.log(querySelectorAllItems.length); // 新しい要素が追加された後の要素数（1のまま）
活用例
実際にgetElementsByClassName()メソッドはどのように使われるのか、具体例を挙げて解説します
スタイルを一括で変更
getElementsByClassName()メソッドを使って複数の要素を取得し、その全ての要素のスタイルを変えたいときなどに有効です。
以下はボタンをクリックするとexampleというクラスが付与された要素全てのスタイルを変える例です。
1
2
3
4
<div class="example">Item 1</div>
<div class="example">Item 2</div>
<div class="example">Item 3</div>
<button id="changeColorButton">クリック</button>
1
2
3
4
5
6
7
8
const button = document.getElementById('changeColorButton');
button.addEventListener('click', () => {
const elements = document.getElementsByClassName('example');
for (let element of elements) {
element.style.backgroundColor = 'yellow';
}
});
ボタンをクリックすると取得した要素の背景色が黄色に変わるのが確認できます。
See the Pen getElementsByClassName01 by miyajima yuya (@pikawaka) on CodePen.
フィルタリング機能
getElementsByClassName()メソッドを使って複数の要素を取得し、その全ての要素に対してフィルタリングを行うことができます。検索機能を実装したいときなどに便利です。
以下は検索用のテキスト入力フィールドに入力された文字が含まれる要素のみをフィルタリングする例です。
1
2
3
4
5
6
7
8
9
10
11
<h1>検索</h1>
<input type="text" id="search" placeholder="検索...">
<div id="itemList">
<div class="list-item">りんご</div>
<div class="list-item">バナナ</div>
<div class="list-item">オレンジ</div>
<div class="list-item">スイカ</div>
<div class="list-item">キウイ</div>
<div class="list-item">みかん</div>
<div class="list-item">メロン</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
const searchInput = document.getElementById('search');
const items = document.getElementsByClassName('list-item');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value;
for (let item of items) {
if (item.textContent.includes(keyword)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
}
});
See the Pen getElementsByClassName02 by miyajima yuya (@pikawaka) on CodePen.
この処理の順番を以下に記述します。
searchというidを持つ要素を取得し、searchInputに代入list-itemというクラス名を持つ全ての要素を取得し、itemsに代入- 入力フィールドの値が変更されたときのイベントリスナーを追加
- 入力フィールドの値を取得し、
keywordに代入 for文を使い繰り返し処理を作成includesメソッドを使い、keywordの文字が各要素のテキストに含まれているか確認- 含まれていない場合は非表示にする
それでは順番に解説していきます。
1. searchというidを持つ要素を取得し、searchInputに代入
1
2
3
4
5
6
7
8
9
10
11
<h1>検索</h1>
<input type="text" id="search" placeholder="検索...">
<div id="itemList">
<div class="list-item">りんご</div>
<div class="list-item">バナナ</div>
<div class="list-item">オレンジ</div>
<div class="list-item">スイカ</div>
<div class="list-item">キウイ</div>
<div class="list-item">みかん</div>
<div class="list-item">メロン</div>
</div>
まずはgetElementById()メソッドを使って、検索用のテキスト入力フィールドの要素を取得します。この入力フィールドにはsearchというidが付与されているので、この値を引数に渡し、入力フィールドの要素を取得してsearchInputに代入します。
1
2
// 入力フィールドの要素を取得
const searchInput = document.getElementById('search');
2. list-itemというクラス名を持つ全ての要素を取得し、itemsに代入
1
2
3
4
5
6
7
8
9
10
11
<h1>検索</h1>
<input type="text" id="search" placeholder="検索...">
<div id="itemList">
<div class="list-item">りんご</div>
<div class="list-item">バナナ</div>
<div class="list-item">オレンジ</div>
<div class="list-item">スイカ</div>
<div class="list-item">キウイ</div>
<div class="list-item">みかん</div>
<div class="list-item">メロン</div>
</div>
次に検索対象の要素を全て取得するために、getElementsByClassName()メソッドを使用します。この例では、検索対象の各要素にはlist-itemというクラス名が付与されています。
したがって、getElementsByClassName()メソッドの引数にはlist-itemを渡して要素を取得し、それをitemsに代入します。
1
2
3
const searchInput = document.getElementById('search');
// 検索対象の要素を全て取得
const items = document.getElementsByClassName('list-item');
3. 入力フィールドの値が変更されたときのイベントリスナーを追加
次にaddEventListener()メソッドを使い、入力フィールドの値が変更されたときのイベントリスナーを追加します。監視する要素は検索ワードを入力するテキスト入力フィールドなので、1で取得したsearchInputに対して使用します。第一引数には、入力フィールドの値が変更されたときを示すinputイベントを指定します。
1
2
3
4
5
6
const searchInput = document.getElementById('search');
const items = document.getElementsByClassName('list-item');
searchInput.addEventListener('input', () => {
// 処理
});
4. 入力フィールドの値を取得し、keywordに代入
次に、入力フィールドに入力された値を取得するため、入力フィールドの要素のvalueプロパティを使用します。取得した値はkeywordに代入します。
1
2
3
4
5
6
const searchInput = document.getElementById('search');
const items = document.getElementsByClassName('list-item');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value;
});
5. for文を使い繰り返し処理を作成
次に、各要素に検索ワードが含まれているかを確認するため、繰り返し処理を行います。getElementsByClassName()メソッドの返り値はHTMLコレクションであり、配列ではありません。そのため、mapやforEachなどの配列メソッドは使用できません。したがって、for文を使って繰り返し処理を定義します。
1
2
3
4
5
6
7
8
9
const searchInput = document.getElementById('search');
const items = document.getElementsByClassName('list-item');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value;
for (let item of items) {
// 繰り返される処理
}
});
for文では検索される全ての要素が入ったitemsから順番に要素を取り出しitemに代入しています。
6. textContentを使い、各要素のテキストを取得
1
2
3
4
5
6
7
8
9
10
11
<h1>検索</h1>
<input type="text" id="search" placeholder="検索...">
<div id="itemList">
<div class="list-item">りんご</div>
<div class="list-item">バナナ</div>
<div class="list-item">オレンジ</div>
<div class="list-item">スイカ</div>
<div class="list-item">キウイ</div>
<div class="list-item">みかん</div>
<div class="list-item">メロン</div>
</div>
次に、各要素に入力された値が含まれているかどうかでフィルタリング作業を行います。各要素のテキストはtextContentを使って取得します。そして、指定したテキストが含まれていればtrueを、そうでなければfalseを返すincludesメソッドを使い、引数に渡したテキストが含まれているかを判定します。
1
2
3
4
5
6
7
8
9
10
11
12
13
const searchInput = document.getElementById('search');
const items = document.getElementsByClassName('list-item');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value;
for (let item of items) {
if (item.textContent.includes(keyword)) {
// 含まれていたときの処理
} else {
// 含まれていないときの処理
}
}
});
7. 含まれていない場合は非表示にする
最後に検索キーワードが含まれていない要素は非表示にします。item.style.display = 'none';とすることで要素のdisplayプロパティをnoneに設定し、要素を非表示にしています。キーワードが含まれている場合は、item.style.display = ''とすることで、display: none;の設定を削除し、要素を再表示させています。
1
2
3
4
5
6
7
8
9
10
11
12
13
const searchInput = document.getElementById('search');
const items = document.getElementsByClassName('list-item');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value;
for (let item of items) {
if (item.textContent.includes(keyword)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
}
});
これで完成です。
実際に文字を入力して確認してみましょう。
See the Pen getElementsByClassName02 by miyajima yuya (@pikawaka) on CodePen.
フォームバリデーション
getElementsByClassName()メソッドを使って、同じクラス名を持つ複数の入力フィールドを一括で検証することができます。以下は、すべての必須入力フィールドをチェックし、空のフィールドにエラーメッセージを表示する例です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id="myForm">
<div>
<label for="username">ユーザー名: <span class="error">入力必須</span></label><br>
<input type="text" id="username" class="required"><br>
<span class="error" id="usernameError"></span>
</div>
<div>
<label for="email">メールアドレス: <span class="error">入力必須</span></label><br>
<input type="email" id="email" class="required"><br>
<span class="error" id="emailError"></span>
</div>
<div>
<label for="password">パスワード: <span class="error">入力必須</span></label><br>
<input type="password" id="password" class="required"><br>
<span class="error" id="passwordError"></span>
</div>
<button type="submit">送信</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
let isAllFilled = true;
for (let field of requiredFields) {
const errorSpan = document.getElementById(field.id + 'Error');
if (field.value.trim() === '') {
isAllFilled = false;
errorSpan.textContent = 'このフィールドは必須です';
} else {
errorSpan.textContent = '';
}
}
if (isAllFilled) {
for (let field of requiredFields) {
field.value = '';
}
alert("送信されました")
}
event.preventDefault();
});
入力必須のフィールドに何も入力されていないと、「送信」を押した際にエラーメッセージが表示されるのが確認できます。
See the Pen getElementsByClassName03 by miyajima yuya (@pikawaka) on CodePen.
この処理の順番を以下に記述します。
myFormというidを持つフォーム要素を取得し、formに代入requiredというクラス名を持つ要素を全て取得し、requiredFieldsに代入- 「送信」ボタンが押されたときのイベントリスナーを追加
for文を使い繰り返し処理を作成- 入力フィールドに何も入力されていないときの条件分岐を作成
- エラーメッセージを表示する要素を取得
- エラーメッセージを表示させる
- 送信が完了した際の処理を追加
それでは順番に解説していきます。
1. myFormというidを持つフォーム要素を取得し、formに代入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="myForm">
<div>
<label for="username">ユーザー名: <span class="error">入力必須</span></label><br>
<input type="text" id="username" class="required"><br>
<span class="error" id="usernameError"></span>
</div>
<div>
<label for="email">メールアドレス: <span class="error">入力必須</span></label><br>
<input type="email" id="email" class="required"><br>
<span class="error" id="emailError"></span>
</div>
<div>
<label for="password">パスワード: <span class="error">入力必須</span></label><br>
<input type="password" id="password" class="required"><br>
<span class="error" id="passwordError"></span>
</div>
<button type="submit">送信</button>
</form>
フォームの送信ボタンが押されたときに入力フィールドをチェックするため、まずはチェックするフォーム要素を取得します。フォーム要素にはmyFormというidが付与されているので、getElementById()メソッドを使って要素を取得し、それをformに代入します。
1
2
// form要素を取得
const form = document.getElementById('myForm');
2. requiredというクラス名を持つ要素を全て取得し、requiredFieldsに代入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="myForm">
<div>
<label for="username">ユーザー名: <span class="error">入力必須</span></label><br>
<input type="text" id="username" class="required"><br>
<span class="error" id="usernameError"></span>
</div>
<div>
<label for="email">メールアドレス: <span class="error">入力必須</span></label><br>
<input type="email" id="email" class="required"><br>
<span class="error" id="emailError"></span>
</div>
<div>
<label for="password">パスワード: <span class="error">入力必須</span></label><br>
<input type="password" id="password" class="required"><br>
<span class="error" id="passwordError"></span>
</div>
<button type="submit">送信</button>
</form>
次に、入力が必須のフィールドを取得します。確認すると、requiredというクラス名が付いているので、getElementsByClassName()メソッドを使って入力必須の要素を全て取得し、それをrequiredFieldsに代入します。
1
2
3
const form = document.getElementById('myForm');
// 入力必須の要素を全て取得
const requiredFields = document.getElementsByClassName('required');
3. 「送信」ボタンが押されたときのイベントリスナーを追加
次に、送信ボタンが押されたときのイベントリスナーを追加します。どのフォームが送信されたかを監視するため、1で取得したformに対してaddEventListener()メソッドを使用します。フォームの送信時にはsubmitイベントを指定します。
1
2
3
4
5
6
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
// 処理
});
4. for文を使い繰り返し処理を作成
次に、for文を使い、取得したそれぞれの入力フィールドに値が入っているかを確認する繰り返し処理を作成します。
1
2
3
4
5
6
7
8
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
for (let field of requiredFields) {
// 値が入っているかの確認処理
}
});
for文では、すべての入力フィールドの要素が入ったrequiredFieldsから各フィールドを順番に取り出し、それをfieldに代入します。
5. 入力フィールドに何も入力されていないときの条件分岐を作成
次に、入力フィールドの値に基づいて条件分岐を作成します。まず、入力フィールドの要素のvalueプロパティを使用して、入力された値を取得します。取得した値に対してtrimメソッドを使い、値の前後にある余分な空白を削除します。これにより、入力された値が空文字かどうかを正確に判定することができます。
1
2
3
4
5
6
7
8
9
10
11
12
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
for (let field of requiredFields) {
if (field.value.trim() === '') {
// 入力フィールドが空のときの処理
} else {
// 入力フィールドが空ではないときの処理
}
}
});
6. エラーメッセージを表示する要素を取得
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="myForm">
<div>
<label for="username">ユーザー名: <span class="error">入力必須</span></label><br>
<input type="text" id="username" class="required"><br>
<span class="error" id="usernameError"></span>
</div>
<div>
<label for="email">メールアドレス: <span class="error">入力必須</span></label><br>
<input type="email" id="email" class="required"><br>
<span class="error" id="emailError"></span>
</div>
<div>
<label for="password">パスワード: <span class="error">入力必須</span></label><br>
<input type="password" id="password" class="required"><br>
<span class="error" id="passwordError"></span>
</div>
<button type="submit">送信</button>
</form>
入力フィールドが空のときにエラーメッセージを表示するため、メッセージを表示する要素を取得します。確認すると、入力フォームのidにErrorが追加されたidが付与されていることがわかります。
例えば、「ユーザー名」が空の場合にはその入力フィールドのidであるusernameを取得し、その末尾にErrorを加えることで、idがusernameErrorの要素を取得することができます。
そのため、入力フィールドの要素が格納されているfieldのidの値をfiled.idとして取得し、その後にErrorという文字列を連結させた値をgetElementById()メソッドの引数として渡します。こうしてエラーメッセージを表示する要素を取得し、それをerrorSpanに代入します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
for (let field of requiredFields) {
// エラーメッセージを表示させる要素を取得
const errorSpan = document.getElementById(field.id + 'Error');
if (field.value.trim() === '') {
// 入力フィールドが空のときの処理
} else {
// 入力フィールドが空ではないときの処理
}
}
});
7. エラーメッセージを表示させる
次に、入力フィールドが空のときにエラーメッセージを表示させます。先ほど取得した要素にtextContentを使ってエラーメッセージをセットします。また、値が入っているときにはエラーメッセージを消去するため、空文字を代入します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
for (let field of requiredFields) {
const errorSpan = document.getElementById(field.id + 'Error');
if (field.value.trim() === '') {
errorSpan.textContent = 'このフィールドは必須です';
} else {
errorSpan.textContent = '';
}
}
});
8. 送信が完了した際の処理を追加
最後に、送信が完了した際の処理を追加します。送信するにはすべての入力フィールドに値が入っている必要があります。それを簡単に判別できるように、「全てが埋まっているか」という意味でisAllFilledという真偽値の変数を用意します。初期値はtrueとして定義し、値が入っているかを確認した際に、値が入っていないときはfalseをセットするようにします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
// 全てのフィールドに値が入っているかを確認する変数を定義
let isAllFilled = true;
for (let field of requiredFields) {
const errorSpan = document.getElementById(field.id + 'Error');
if (field.value.trim() === '') {
// 値が入っていないのでfalseを代入
isAllFilled = false;
errorSpan.textContent = 'このフィールドは必須です';
} else {
errorSpan.textContent = '';
}
}
});
これで、一つでも値が入っていないとallFilledはfalseとなるため、送信できる状態かどうかを判別できるようになります。すべての入力フィールドの確認が終了したら、isAllFilledがtrueの場合に各入力フィールドの値を消去し、「送信されました」というアラートを出すようにします。
また、今回の例ではsubmitイベントが実行されるとページが遷移してしまい、エラーが発生します。そのため、preventDefault()を使ってsubmitイベントのデフォルトの動作であるフォーム送信とページリロードを防ぎ、アラートを表示させています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const form = document.getElementById('myForm');
const requiredFields = document.getElementsByClassName('required');
form.addEventListener('submit', (event) => {
let isAllFilled = true;
for (let field of requiredFields) {
const errorSpan = document.getElementById(field.id + 'Error');
if (field.value.trim() === '') {
isAllFilled = false;
errorSpan.textContent = 'このフィールドは必須です';
} else {
errorSpan.textContent = '';
}
}
// 全てのフィールドに値が入っている場合の処理
if (isAllFilled) {
for (let field of requiredFields) {
// 各入力フィールドの値を削除
field.value = '';
}
alert("送信されました")
}
// submitイベントのデフォルトの動作をキャンセル
event.preventDefault();
});
これで完成です。
以下のCodePenで実際にエラーメッセージが表示されるか確認してみましょう。
See the Pen getElementsByClassName03 by miyajima yuya (@pikawaka) on CodePen.
注意点
返り値は配列ではない
getElementsByClassName()メソッドは指定されたクラス名を持つ全ての要素を含むHTMLコレクションを返します。HTMLコレクションは配列のように扱うことはできますが、配列ではありません。そのため配列専用のメソッド（例えばforEachやmap）は使えません。
1
2
3
4
5
6
let elements = document.getElementsByClassName('example');
// forEachメソッドを使ってスタイルを設定しようとするとエラーが発生する
elements.forEach(function(element) {
element.style.color = 'red'; // Uncaught TypeError: elements.forEach is not a function
});
またHTMLコレクションはライブコレクションのため、要素が変更されると自動的にその変更が反映されます。そのため、要素を再取得したり削除した際には取得する要素の数も変更されるため、注意しましょう。
クラス名が存在しない場合
getElementsByClassName()メソッドの引数に存在しないクラス名を渡してしまうと、空のHTMLコレクションが返ります。そのため、繰り返し処理をした際にループ処理が行われず、予期しない結果に繋がる場合があるので注意しましょう。
1
2
3
4
<div class="example">要素1</div>
<div class="example">要素2</div>
<div class="example">要素3</div>
1
2
3
4
5
6
7
8
9
let elements = document.getElementsByClassName('nonexistent');
console.log(elements); // 空のHTMLコレクションを返す
console.log(elements.length); // 0を返す
// 空のHTMLコレクションに対してループ処理を行う
for (let element of elements) {
// 要素がないため繰り返しが起こらず実行されない
element.style.color = 'red';
}
この記事のまとめ
getElementsByClassName()メソッドはWebページから特定のクラス名を持つ要素を全て取得するメソッドです。getElementsByClassName()メソッドは要素をHTMLコレクションとして取得します。- 共通する複数の要素を操作する際に便利なメソッドです。
