【脱jQuery？】jQueryみたいなセレクタが使えるdocument.querySelectorが便利 - 自動化厨のプログラミングメモブログ │ CODE:LIFE

この記事でできるようになること

jQueryを使わずに#myID .myClassみたいなセレクタが使えるようになる

ちょっとしたjavascriptを書くだけなのにCSSっぽいセレクタを使って楽したいがためにjQueryライブラリを読ませるのは面倒。

document.getElementById('aaa').getElementsByClassName('bbb')[0]

なんて書くの長すぎ。

jQuery使わずにもっと短い書き方無いんかい！

と思って調べたところありました。

document.querySelector

概要

与えられた CSS セレクタにマッチする文書中の最初の要素（※深さ優先の先行順走査によるもの）を返します。

構文

element = document.querySelector( selectors );

引用元：document.querySelector() - Web API インターフェイス | MDN

つまり、jQuery読み込まずにjQueryと同じセレクタが使える。これです。探していたやつ。

使用例

See the Pen querySelector by maru (@maru0014) on CodePen.

複雑なセレクタじゃないならgetElementsByClassNameの方が早い？

MDNの例を見てみるとクラス名で単一の要素を取得する場合は.getElementsByClassNameの方が処理速度が早いとあります。 document.querySelectorでクラス名指定する場合は複雑なセレクタになるときだけ使うのが良さそうです。2階層以上指定のときとかでしょうか

element = document.getElementsByClassName('aaa')[0].getElementsByClassName('bbb')[0]

↓

element = document.querySelector('.aaa > .bbb');

これくらい差があればquerySelectorの方がいいですね。状況に応じて使い分けるか、速度はそこまで求めないから全部querySelectorでやっちゃうかってとこです。

一発で配列化できるdocument.querySelectorAll

document.querySelectorはクラス名で指定した時も最初にマッチした単一の要素を取ってきます。

対してdocument.querySelectorAllはセレクタにマッチした要素を全て配列として格納してくれる。

.getElementsByClassName('bbb')と同じ挙動ですね。

これもおそらく.querySelectorAllよりも.getElementsByClassNameが速度的には早いのかもしれませんが、セレクタが複雑な場合は.querySelectorAllを使うことになるでしょう。

使用例

See the Pen querySelectorAll by maru (@maru0014) on CodePen.

上記は.collection > .collection-item > spanというセレクタで配列にしています。もし.getElementsByClassNameなどを用いて書くなら

//CLASSでセレクトして配列に格納
var list = document.getElementsByClassName('collection')[0].getElementsByClassName('collection-item');

//listの数だけ繰り返し
for(var i = 0; i < list.length; i++) { 
  //連番を付ける
  list[i].getElementsByTagName('span')[0].textContent = [i+1] + '.' + list[i].getElementsByTagName('span')[0].innerText;
}