コンテンツへスキップ
Tags

jQueryの代わりにdocument.querySelectorを使う

by : 2019/01/22

jQueryはIDやクラスを指定してDOMエレメントが取得できるので便利に使っている人は多いかと思います。しかし、DOMの取得だけであれば素のJavaScriptでも簡単にできます。それがdocument.querySelectorです。

他にもIDを指定する document.getElementById 、クラスを指定する document.getElementsByClassName 、タグ名を指定する document.getElementsByTagName など何種類もあるのが分かりづらさを感じさせる原因ですが、document.querySelector と document.querySelectorAll はすべてを兼ね備えます。

ということで今回は document.querySelector / document.querySelectorAll の使い方を紹介します。

document.querySelector と document.querySelectorAll の違い

二つのメソッドの違いは返ってくるのが複数かどうかです。 document.querySelector は最初の一つしか返ってきません。クラスやリストを指定しても最初の一つだけです。それに対して document.querySelectorAll は一致するDOMすべてが返ってきます。

document.querySelectorの使い方

document.querySelector は引数にCSSセレクタを指定します。これはjQueryで使ってきたものをそのまま使えます。

document.querySelector('.hoge')

view raw
index.js
hosted with ❤ by GitHub

返ってくるのはDOMです。

ない時には nullが返ってくる

注意点としては該当するDOMがなかった場合には null が返ってくるので、メソッドチェーンが使えません。それに対してjQueryの場合はメソッドチェーンが可能です。

document.querySelector('.hoge').innerText // エラー
$('.hoge').text() // 空文字

view raw
index.js
hosted with ❤ by GitHub

これをいちいち判定しながら作るのはちょっと面倒でしょう。

簡単な関数でラップする

そこで document.querySelector を直接使わず、簡単な関数でラップしてあげます。

function $(selector, doc) {
let dom = null;
let target = doc || document;
const plural = !(selector.match(/^.*#[a-zA-Z0-9\-_\.]+$/));
if (plural) {
dom = target.querySelectorAll(selector);
} else {
dom = target.querySelector(selector);
}
if (plural) {
if (dom.length > 0) return dom;
} else {
if (dom) return dom;
}
dom = document.createElement('div')
dom.$ = function(selector) {
return $(selector, dom)
};
return plural ? [dom] : dom;
}

view raw
index.js
hosted with ❤ by GitHub

これはごくごく簡単な例ですが、存在しないCSSセレクタを指定してもある程度のメソッドチェーンが書けるようになります。


document.querySelectorやdocument.querySelectorAll、そしてそれがエラーを起こさないためのやり方さえ覚えてしまえばjQueryを使うことなくDOM操作を行えるようになります。jQueryは他にもたくさんの機能があって便利ですがAngularやReact、Vueとの相性が良くなかったり、使っていない機能の方が多くなりがちです。jQueryで使っているのがDOM操作ばかりだ…という方はdocument.querySelectorに乗り換えても良いでしょう。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。