JavaScript

getElementsByClassNameでクラス名から要素を取得【JavaScript】

この記事では、getElementsByClassNameを使って、クラス名から要素を取得します。

getElementsByClassName

使い方

getElementsByClassName('クラス名')と指定することによって、該当する全てが配列として返されます。

下記のHTMLを例に見ていきましょう。

<div>
  <ul>
    <li class="sports soccer">サッカー</li>
    <li class="study">英語</li>
    <li class="sports baseball">野球</li>
    <li class="study">数学</li>
    <li class="sports volleyball">バレー</li>
  </ul>
</div>
var sports = document.getElementsByClassName('sports');
console.log(sports);
// => [li.sports.soccer, li.sports.soccer, li.sports.volleyball]

console.log(sports[1]);
// => <li class="sports baseball">

console.log(sports[1].innerHTML);
// => 野球

getElementsByClassName('sports')を指定すると該当する3つの配列が返ってきます。

sports[1]のように使うことで個別の要素にアクセスします。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2021 ウェブつく Powered by AFFINGER5