More than 3 years have passed since last update.

getElementByIdとgetElementByClassNameの違い

Posted at 2020-07-02

const aaa = document.getElementsByClassName("aaa");
console.log(aaa);
//
const bbb = document.getElementById("bbb");
console.log(bbb);

上記は同じように見える少なくともjQueryで書くと多分こう

const aaa = $(".aaa");
console.log(aaa);
const bbb = $("#bbb");
console.log(bbb);

aaaもbbbもオブジェクトを返してくれる。

しかしプレーンのjavascriptはそうはいかない。

getElementByIdはオブジェクトを返してくれる（jQueryのように）が
getElementsByClassNameはHTMLCollection（配列っぽいもの）を返す。

const aaa = document.getElementsByClassName("aaa");
console.log(aaa);
↓
HTMLCollection { 0: p.aaa, length: 1 }

const bbb = document.getElementById("bbb");
console.log(bbb);
↓
<p id="bbb">

これの何が重要か

getElementByIdはオブジェクトを返してくれる（jQueryのように）が
getElementsByClassNameはHTMLCollection（配列っぽいもの）を返す。

と書いたが、これのせいでgetElementByClassNameでは「addEventListener」などの指定ができない。
配列のようになっているので

const aaa = document.getElementsByClassName("aaa")[0];
↓
<p class="aaa">

としなければ動かない。

（まず皆がどうやっているのかを知りたいが。。。）

全てをIDにするのは無理なので、「querySelector」を使うと良いかもしれない。

const ccc = document.querySelector('.ccc');
console.log(ccc);
↓
<p class="ccc">

querySelectorの参考URL

プレーンのJavaScriptを勉強しているがわからないことが山ほど出てきてjQueryに依存しすぎていた感が否めない。。。