【JavaScript】getElementsByClassNameでうまくクラスを取得できないとき

JavaScript

クラス名に基づいて要素を取得したいときに用いられるgetElementsByClassNameですが、うまくいかないときに注意したい点があります。

それは、idなどとは異なり、複数の要素を取得してしまうことです。

そもそもid は1ドキュメントあたり、同じidは1つしか適用できません。しかし、class は複数の要素に使うことができます。

また、メソッドを比較しても分かるのですが、classは複数の要素を持ってくることになっています。

  • class: getElementsByClassName
  • id: getElementByid

上記見ても分かるように、classのElementは複数形になっていますね。

実際に使うときには

結果、実際に使用する際は、[0] のような配列の形で取得したい要素を指定する必要があります。

document.getElementsByClassName(‘list’)[0];

注意してご使用ください。

タイトルとURLをコピーしました