JavaScript 進捗報告 2日目 | 初心者による"getElementById"と"getElementsByClassName"の使い方備忘録

IT専門学生のふじさわです。

最近、少しJavaScript（以下、JS）に触れる機会があったのですが、私はJS初心者すぎて、今更ながらかなり初歩的な知見を得たので記事で残そうと思います。

☆ 今日の作業内容 ☆

【前提】JavaScriptではWebページの操作ができる

前回のJSの日誌の時に書いた分を引用します。

そもそもwebページの中身はHTMLで書かれているわけですが、めちゃくちゃ端的に言えばこのHTMLからデータとってきて処理したり、HTMLの内容を書き換えたりするのがJavaScriptです。

HTMLでは、各要素に対してidやclassを付与できます。同名idはページに1つまで、同名classは何度でも使えます。

ByIdとByClassNameの差異

JSでHTML内の特定の要素を取得するためのメソッドは複数あるのですが、id名指定とclass名指定で仕様に若干の差異があることを初めて知ったのでメモを残します。

・id名で取得：getElementById
・class名で取得：getElementsByClassName

例として、以下のようなドキュメント（HTML）があったとします。

<p id="good">良い点</p>
<p class="bad">悪い点</p>

正当性とか一旦置いといて、こういうのがあると自分を洗脳してください。

ここで「良い点」の<p>要素を取得して書き換えるには以下のように書けばいいわけです。

const target = document.getElementById('good');
target.textContent = '大きい';

反対に「悪い点」を書き換えるには…

const target = document.getElementsByClassName('bad');
target.textContent = '高額';

このように先ほどと同じような書き方をしても反映されません。

これには、それぞれのメソッドの戻り値が関係します。かなり平たく言えば、

・getElementById：指定idの要素を返す
・getElementsByClassName：指定classを付与されているすべての要素を配列（正確にはHTMLCollection）で返す

という違いがあり、よく考えたら後者のメソッド名はgetElement"s"と複数形になっています。

配列で返すのはgetElementsByNameなども同様です。

よって、class名指定の要素を書き換えるには、

const target = document.getElementsByClassName('bad');
target.item(0).textContent = '高額';

このように、targetに格納した配列のうちitem(0)を指定することで初めて1つの<p>要素が取得できます。

まとめ

・getElementById：指定idの要素を返す
・getElementsByClassName：指定classを付与されているすべての要素を配列（正確にはHTMLCollection）で返す、itemメソッドで配列の内容を参照すると要素が返る

こんなことも知らない自分に驚きもありますが、こういう一歩一歩が大切だからさ…

本日もお疲れ様でした！