【脱jQuery】VanillaJSを使ってセレクタを取得するほぼ4つの方法

jQueryを使わないでセレクタを取得する方法を紹介します!

最近では、jQueryを使わない流れになりつつありますね。
なので、今のうちにVanillaJSでプログラミング出来るようにしておいた方が幸せになれるかと思います!

脱jQueryの理由については、記事の最後に書いてあります!

ちなみにVanillaJSというのは、jQueryなどのプラグインを使わず、素のJavascriptを使うという意味です。

とりあえず記述方法

// セレクタ全般を取得
document.querySelector('section.hoge');
document.querySelectorAll('section.hoge');

// IDの取得
document.getElementsById('hoge');

// Classの取得
document.getElementsClassName('foo');

// HTMLタグの取得
document.getElementsByTagName('section');

querySelector()でjQueryライクに取得

個人的にはこれが最適解かな?
これを覚えれば基本的にはOKだと思います!

script.js

// セレクタ「section」を取得
const text = document.querySelector('section');

// クラス名「text」を取得
const text = document.querySelector('.text');

// ID「wrapper」を取得
const wrapper = document.querySelector('#wrapper');

jQueryと比較すると、$を使うのかquerySelector()を使うかの違いだけですね!

しかし!

これ1つだけだと若干足りない点があります。
querySelector()は要素を1つしか取得できないという弱点があります。

IDの取得は問題ないのですが、タグやクラス名など複数を取得する場合は、これだと対応できません・・・。
複数要素がある場合にquerySelector()を使うと、一番最初の要素だけが取得されます。

<body>
  <p class="text">この要素だけ取得できる</p>
  <p class="text">この要素は取得できない</p>
</body>



指定した、全ての要素を取得するにはquerySelectorAll()を使います。

// クラス名「.text」をすべて取得
const texts = document.querySelectorAll('.text');

この時、変数textsの中には各要素のオブジェクトが配列で格納されます。
なので、取得した要素全てに手を加えたいときは、for文を回す必要があります。



例えば、取得した全ての要素のテキストカラーを赤にしたい場合は、以下のようにします。

// クラス名「.text」をすべて取得
const texts = document.querySelectorAll('.text');

// .textのcolorをredにする
texts.forEach(function(text) {
  text.style.color = 'red';
});

これでOKです!!

forEachがイマイチ分からない方は【Javascriptで使える5つの繰返し処理(for / while)の特徴をまとめてみた】で解説しているので参考にしてみてください!

  • 要素を取得する際にはquerySelector()がオススメ
  • 要素を複数取得する際はquerySelectorAll()を使う必要がある
  • querySelectorAll()は要素の配列を返すので、手を加えたいときはfor文を回す

getElementsById()でIDのみ取得

次は、IDを取得する方法です!

// #wrapperを取得
document.getElementById('wrapper');

IDのみなので利便性はあまり良くないですね。

ただ、逆に言うと内部的にIDだけを見ているので、処理速度はquerySelector()よりも速くなります。(少しだけねw)
また、IDで要素を取得するということが明示的に分かるメリットもあります。

メリットが無いわけではないので、IDを取得したい場合に思い出したらこっちを使う程度で大丈夫かなと思います!

  • IDで要素を取得する場合はgetElementsByIdを使う
  • querySelectorよりも処理速度が速い
  • IDで取得できることを明示的に表現できる
  • 覚えてたら使う程度でOK

getElementsClassName()でClassのみ取得

今度は、Classを取得する方法です!

// .textを取得
document.getElementsClassName(‘text’);

こちらもIDの時と同じですね!
querySelector()と比べると少しだけ速く、明示的です。

また、このメソッドは配列を返します。
なのでquerySelectorAll()と同じく、全ての要素に手を加えたいときはfor文を回しましょう

  • IDで要素を取得する場合getElementsClassNameを使う
  • querySelectorよりも処理速度が速い
  • IDで取得できることを明示的に表現できる
  • 覚えてたら使う程度でOK

getElementsByTagName()でHTMLタグのみ取得

今度はHTMLタグを取得する方法です。
とはいえ、JSで要素を取得する際にHTMLタグを指定するのはメンテナンス性がかなり悪くなるので、まずやらないですねw
なので、さらっと紹介して終わりにします!

// sectionを取得
document.getElementsByTagName(‘section’);

おわり(^ω^)END

脱jQueryをする利点とは?

jQueryは便利なのになぜ【】する必要があるのか解説します!
jQueryを導入することでのデメリットを列挙してみるとこんな感じになります。

  • ページの読み込みが遅くなる
  • 他のプラグインとコンフリクトする危険性が高い
  • jQueryが読み込まれないとエラーが起きる

ページの読み込みが遅くなる

jQuery1つだけで【68KB】もあります。

また、jQueryを使う際は、jQueryファイルを最初に読み込ませないといけないのでdeferなどを使って、非同期に読み込ませることもできません。

つまり、jQueryが読み込まれるまでレンダリングを止める必要が出てきます。

結果、ページの読み込みが遅くなるリスクが出てきます。

他のプラグインとコンフリクトする危険性が高い

プラグインを多く使っていると、プラグイン同士のコンフリクトを起こす場合があります。

コンフリクトを起こす原因が$だったりすることはよくあります。
なぜかプラグイン実装者は$を使いたがるんですよね。。

回避方法はいくつかあります。
まぁ、jQuery導入前であれば、jQueryを使わないようにするのが一番手っ取り早いですね。

jQueryが読み込まれないとエラーが起きる

本番環境で時々見るエラー。

意外と頻度の高いエラーが、

$ is not foundだったりします。

つまり、jQueryが読み込まれていないためにエラーを出しているケースです。
僕が開発に参加したサービスでも、2〜3日に一度はエラーを出していました。

実際、頻度は少ないのですが、遭遇したユーザーにとってはサービスが使えないとストレスですよね?
リロードすれば直りますが、一般ユーザーはその発想には、なりにくいと思います。

なので、jQueryではなく、VanillaJSを使った方がみんな幸せになれます(´ω`)




はい!というわけで以上になります!
一応、脱jQueryを謳ってはいますが、jQueryを使うと記述量が少なくなるし、ソースコードが分かりやすくなるメリットはあります。

あとは、jQuery前提のプラグインが多いという現状もあります。

結論、現状はどっちも使えるのが良いかなと思います。

では、最後までありがとうございました!!