HTML要素の取得はいままでjQueryで取得するのが簡単なので、それですることが多かったのですが、
jQueryのように取得できる「querySelector()」が便利だったのでご紹介！

querySelector()とは

上で、記述通りHTML要素を取得できるメソッドです。
今までもJavaScriptで「getElementById()」とか「getElemetnsByClassName()」はもともとありましたが
ID属性・class属性のセレクタは取得できましたが、そんなこと気にせずに使えるのが「querySelector()」です。

まぁ、わかりやすく言うとquerySelector()でどんなHTML要素でも取得することができるのです。

querySelector()はどうやって使う？

ひとまずは、一番簡単な構文がこんな感じです。

document.querySelector('.selector');
document.querySelector('#selector');

こんな感じで取得ができます。
さすがにjQueryよりは記述としては長いですが、getElemen….なんちゃらよりは楽な気がしますよねｗ
実際には、変数に打ち込んで使う感じになると思います。

const elm1 = document.querySelector('.selector');
const elm2 = document.querySelector('#selector');

こんな感じになるかと思います。
一つ注意しないといけないことがあります。
jQueryと違って「querySelecoter()」は、取得できるのが最初に取得したもののみということです。
なのでclassなので複数取得したい場合の方法は別にあります！

「querySelectorAll()」を使えば、複数のHTML要素を取得できます。
書き方はほぼいっしょです。

const elmA = document.querySelectorAll('.selector');

うん、Allつけるだけですねｗ
簡単です！
複数の要素もとれるし、最初のだけっていうのも使いやすそうでよい。
最初の要素だけ取得とかっていろいろつかえるのでこれはこれで便利ですよね。

PureJSはjQueryとかを読み込まなくてもよくなって少しは速度アップになるので、
できるだけこういった書き方をできるだけしていきたいですよね。