【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【JavaScript】class名で要素を取得する方法

本記事では、JavaScriptを使ってclass名で要素を取得する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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名が存在しない場合は空の配列[]が渡される

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次