Now Loading...

Now Loading...

【jQueryを使わないJavaScript】getElementsByClassNameの取得時の[0]について

JavaScriptのgetElementsByClassNameについて

こんにちはガルガリオンです(@Garugarion)

久々に体調悪くてやたら感謝しがちになったのですが、月一で体調悪くなる女の子の方が男子よりも精神年齢高いって言われるのに妙に納得しました。

今回はjQueryを使わないJavaScriptのgetElementsByClassNameの挙動についてのお話です。

さて、僕は普段サーバーサイド〜フロントエンドの仕事をさせてもらっています。
先日、会社にイケメンが入社してきました(Mくんと呼びます)。MくんはjQueryを使うことが多かったらしくJavaScriptのことはあまりわかってないようでした。
僕のところに質問しに来たので隣に座ってコードを書きました。
実装したのは、ボタンを押した時に要素を出したり消したりするものです。コード的にはこんな感じです↓

See the Pen pdoEVL by garugarion (@garugarion) on CodePen.

実装が終わったあと、僕がコードを書いているのを見ていたMくん。Mくんは言いました
M「document.getElementsByClassName(‘button’)[0];の[0]ってなに?」

それな。確かに初見じゃ意味わからないよな。という共感はあったのですが、イケメンは僕たちブルーシートの上で暮らしている人間の敵なので。

僕「ああ、配列で取れるからだよ」
M「配列?ってarray?」
僕「そうそう」
M「そうなんだー」

全く説明しませんでした(イケメン滅びろ)

はたしてMくんは「array?」って言ったのか「アレ?」って言ったのか。。。
さすがにかわいそうなのと、イケメン以外の僕のブログをみてくれてるあなたのために少し補足をします。

idとclassについて

少しだけHTMLとCSSのお話を!

少し前のweb制作では

<div id="header">

のように要素にidをつけていました。idはそのページで重複してはいけないという決まりがあります。
一人でweb制作をするにはいいですが、複数人で制作していたり、ページが長いと意図しないidの重複が発生することがあります。
これを避けるために

<div class="header">

のように要素にidを使ず、classで指定することが多くなってます。

getElementByIdとgetElementsByClassNameについて

ようやくJavaScriptのお話

getElementById

↑の通りidはページ内で重複してはいけません。ページ内に1つしかないので
docment.getElementById(“button”);
で要素を取得すると

<div id="button" class="button">button</div>

idで指定している通り↑の要素が取得できます。
※console.log(docment.getElementsById(“button”));で確認できます。

getElementsByClassName

docment.getElementsByClassName(“button”);をブラウザのconsoleで確認すると

(ブラウザの検証ツールのconsoleで)
▶︎[div#button.button, button: div#button.button]

って表示されて、▶︎をクリックすると

(ブラウザの検証ツールのconsoleで)
▼[div#button.button, button: div#button.button]
 ▶︎0:div#button.button
 ▶︎button:div#button.button
 length:1
 ▶︎__proto__:HTMLCollection

このソースではclass=”button”が1つなのでこう表示されます。

class=”button”が2つある場合

↑ではclass=”button”が1つしかありませんでした。では2つ以上のclass=”button”がある場合はどうなるのよ?ってことで下記のようになります。

(ブラウザの検証ツールのconsoleで)
▶︎(2) [div#button.button, div#button.button, button: div#button.button]

って表示されて、▶︎をクリックすると

(ブラウザの検証ツールのconsoleで)
▼(2) [div#button.button, div#button.button, button: div#button.button]
 ▶︎0:div#button.button
 ▶︎1:div#button.button
 ▶︎button:div#button.button
 length:2
 ▶︎__proto__:HTMLCollection

というふうに、2つのclass=”button”要素が取得できるのです。
いずれの方法でも▼のすぐ下の▶︎の次の文字は0になってます。
この番号はその要素を表す番号です。0には1つめのclass=”button”が。1には2つめのclass=”button”が入っています。

問題解決へ

ここでMくんの質問を振り返ります。

「document.getElementsByClassName(“button”)[0];の[0]って?」

▶︎0:div#button.button

の0のことなのですよ!
getElementsByClassNameは複数の要素が取得できるので、取得した要素に勝手に番号が振られます。
この番号をちゃんと指定してあげるとその要素だけを取得することができます。
なので
docment.getElementsById(“button”);とdocument.getElementsByClassName(“button”)[0];
は同じ結果になります。

まとめ

getElementsByIdはもともと一つしかないから番号を指定しなくてもいい。(と言うか出来ない)
getElementsByClassNameはその要素が1つしかなくても複数取得することを想定しているから番号を指定してあげないといけない。
getElementsByClassNameはよく見るとgetElementのあとに「s」がついてますね。これはgetElementsByClassNameは一人じゃないって意味なんだぜ。
(これ書くたびに「GetBackers-奪還屋-」思い出す)

javascript