javascriptを使ってクラスの付け替えをしたい

Question

以下のHTMLのコードの.tab 要素に、 .-select の付け替えを行いたいです。
classList というものがあると知り描いてみたのですが、以下のエラーが出てしまいます。
Cannot read property 'toggle' of undefined

正しく使うためのコードと、なぜこのようなエラーになるかをご教授いただけると幸いです。
まだまでjs初心者なので、質問が変だったらすみません。。。

よろしくお願い致します。

<div class="tabSelector">
  <ul>
    <li class="tab -select">登記情報</a></li>
    <li class="tab">株主名簿</a></li>
 </ul>
</div>

var target = document.getElementsByClassName('tab');
target.classList.toggle('-select');

Answer 1

getElementsByClassNameはelementsと複数形になっているように、要素のリストが返ってきます。リストの中身を1つ1つ処理する必要があります。

var targets = document.getElementsByClassName('tab');
for(var i = 0; i < targets.length; ++i) targets[i].classList.toggle('-select');

Comments

[TatsuyaOkawa]

なるほど、そういうことだったんですね！！！
無事に動きました！
ありがとうございます！！！！

Answer 2

target.classListがundefinedのために起こります。
targetをdocument.getElementsByClassName()で取得していますが、
これは指定したクラス名がついている要素の配列HTMLCollectionが返ってきます。

つまり、classListが使用できるのはElementである必要があるのに、
targetは~~Element[]~~HTMLCollectionであるために、classListがundefinedとなります。

取得したい要素が必ず0番目であればdocument.getElementsByClassName(xxx)[0]とすればよいでしょう。
[追記]取得した全要素に対してであればループで回しましょう。

Comments

[maisumakun]

2点気になったことがあります。
・質問のHTMLでも、対象となるDOM要素は2つあります。
・getElementsByClassNameの返り値は、配列ではなくHTMLCollectionです（文書の状態に応じて変化する、Arrayのメソッドがない場合があるなどの違いがあります）。

[TatsuyaOkawa]

ご回答ありがとうございます！
理解できた部分とそうでない部分があったので、私自身もう少し勉強が必要ですね。。。

[dice142]

> maisumakun様
「質問のHTMLでも、対象となるDOM要素は2つあります。」
→ 0番目の取得は要素の取得方法の例としてあげたものでしたが、
　 質問内容に対して誤解を与えかねない表現でしたね。

「getElementsByClassNameの返り値は、配列ではなくHTMLCollectionです」
→ 配列と思い込んでました。。。修正しておきます。