この記事では、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]のように使うことで個別の要素にアクセスします。
