JavaScript

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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

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); // -> <li class="fruits">バナナ</li>
console.log(fruitsElem); // -> <li class="fruits">キウイ</li>

const foodElem = document.querySelectorAll(".food");
console.log(foodElem[0]); // -> <li class="food">寿司</li>
console.log(foodElem); // -> <li class="food">カレー</li>
console.log(foodElem); // -> <li class="food">焼肉</li>

また、取得してきた要素をコンソールで確認すると、HTMLCollectionとNodeListと別々の文字列が表示されていることが確認できます。これは動的に生成された要素を反映するか反映しないかの違いです。

動的に生成された要素への対応
  • HTMLCollection:反映する
  • NodeList:反映しない
【JavaScript】id名で要素を取得する方法本記事では、JavaScriptを使ってid名で要素を取得する方法について解説しています。...
【JavaScript】HTMLCollectionとNodeListの違い本記事では、JavaScriptの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アクセスランキング にほんブログ村