Javascriptのこと~class名のこと~

Javascriptのこと~class名のこと~

class名の追加方法

IDを取得してからclass名を付けるのは(多分)特に問題はないが、classを取得してからclass名を付けるときには注意が必要です。

var menuItems = document.getElementById('a');  // ←これは特に問題なし(単数形だから)
var menuItems = document.getElementsByClassName('b'); // ←これは注意(複数形だから)

何が違うか

結局違いは、getElementに【s】が付いているかいないかという事。IDは1ファイルに一つしか入れれないが、classは1ファイルに何個でも入れることができるという仕組みの違いになります。

参考サイト:意外と気付きにくいミス〜単数系と複数形〜

複数形の注意点

複数形(getElementsByClassName)で取得した場合は、配列のようなものをデータとして取得します。
以下のパターンに沿って使い分けます。

パターン①:特定の1つに対して使う場合

箱の何番目(インデックス番号)を指定して引っ張り出します。

var menuItems = document.getElementsByClassName('b');
// 箱の中の0番目を指定すればそのまま操作可能
menuItems[0].classList.add('open');

パターン②:取得したすべての要素に使う場合

「箱の中身を1つずつ取り出して命令する」というループ処理を記述します。

var menuItems = document.getElementsByClassName('b');
// ループ処理を使って、箱の中身を1つずつ全部取り出す
for(var i = 0; i < menuItems.length; i++){
  menuItems[i].classList.add('open');
}
  • X