getElementByIdとgetElementByClassNameの違い

どうも、Shota(@Mii4a_Shota )です。
自作Webアプリの開発中、id取得と同じようにgetElementByClassNameを用いて作成した変数に処理を加えようとした際、

Uncaught TypeError: document.getElementByClassName is not a function

といったエラーが出てきてしまったので、getElementByIdとgetElementByClassNameでは出力に違いがあることに気が付けたので、調べたことを書き記しておこうと思います。

getElementByIdの返り値

<p id="hoge">hoge</p>

var hoge = document.getElementById('hoge');
console.log(hoge); // =>　<p id="hoge">hoge</p>

このように、getElementByIdは引数に合致するidを持つタグと属性、タグに囲まれたテキストを返します。

getElementByClassNameの返り値

<p class="hoge">hoge</p>
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>

var hoge = document.getElementByClassName('hoge');
console.log(hoge);
// => HTMLCollection [ p.hoge, p.hoge, p.hoge ]

このように、getElementByClassNameはHTMLCollectionという配列風のオブジェクトを返します。配列風といっても実際の配列のように、添字での取得やfor構文で用いることができるようです。

詳しくはMDNをご参照ください
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

最後に

両者の処理方法について、同様の処理をすると勘違いをしていたので気が付けてよかったです。
ご覧いただきありがとうございました。