本記事では、JavaScriptを使ってclass名で要素を取得する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
class名で要素を取得する
HTMLタグに設定されているclass名で要素を取得するには、「document.getElementsByClassName()」または「document.querySelectorAll()」を使います。
使い方は以下のとおりです。
<ul>
<li class="fruits">リンゴ</li>
<li class="fruits">バナナ</li>
<li class="fruits">キウイ</li>
</ul>
<ul>
<li class="food">寿司</li>
<li class="food">カレー</li>
<li class="food">焼肉</li>
</ul>const fruitsElem = document.getElementsByClassName("fruits");
console.log(fruitsElem); // -> HTMLCollection(3) [li.fruits, li.fruits, li.fruits]
const foodElem = document.querySelectorAll(".food");
console.log(foodElem); // -> NodeList(3) [li.food, li.food, li.food]ここで注目すべきポイントは要素が配列で代入されていることです。document.getElementById()やdocument.querySelector()のように1つの要素だけを取得した時はそのまま要素が代入されますが、document.getElementsByClassName()やdocument.querySelectorAll()などの複数の要素を取得するものは必ず配列で代入されます。
const fruitsElem = document.getElementsByClassName("fruits");
console.log(fruitsElem[0]); // -> <li class="fruits">リンゴ</li>
console.log(fruitsElem[1]); // -> <li class="fruits">バナナ</li>
console.log(fruitsElem[2]); // -> <li class="fruits">キウイ</li>
const foodElem = document.querySelectorAll(".food");
console.log(foodElem[0]); // -> <li class="food">寿司</li>
console.log(foodElem[1]); // -> <li class="food">カレー</li>
console.log(foodElem[2]); // -> <li class="food">焼肉</li>また、取得してきた要素をコンソールで確認すると、HTMLCollectionとNodeListと別々の文字列が表示されていることが確認できます。これは動的に生成された要素を反映するか反映しないかの違いです。
- HTMLCollection：反映する
- NodeList：反映しない
HTMLにclass名が存在しない場合
取得したいclass名がHTML内に存在しない場合、空の配列[]が代入されます。空の配列に添字を付けて参照した場合undefinedが設定されています。undefinedを何かしらの処理にかけるとエラー「Uncaught TypeError: Cannot set properties of undefined」が出力されますので、注意しましょう。
<p class="text">テキスト</p>const contentElem = document.getElementsByClassName("text01");
console.log(contentElem) // -> []
conosle.log(contentElem[0]); // -> undefined
contentElem[0].textContent = "変更"; // -> Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')まとめ
今回はJavaScriptを使ってclass名で要素を取得する方法について解説しました。重要なポイントをおさらいしておきましょう。
- id名で要素を取得するには「document.getElementsByClassName()」「document.querySelectorAll()」を使う
- 取得した要素は配列として格納されている
- class名が存在しない場合は空の配列[]が渡される
