More than 5 years have passed since last update.

jQueryのfindなどをquerySelectorで書く

Posted at 2017-06-12

:scopeという使いやすそうなものを見つけたので書いてみました

document.querySelectorAll(selector)[n..m]

は

Array.from(document.querySelectorAll(selector)).slice(n, m)

に読み替えてください

`$()`, `.find()`

jQueryの独自セレクタでないもの

これに関してはそのままなのでバーッと
以下のページにあるセレクタ以外はそのまま使えます
jQuery Selector Extensions - jQuery

$("*")
$("#hoge")
$(".fuga")
$("[piyo=value]")

document.querySelectorAll("*")
document.querySelectorAll("#hoge")
document.querySelectorAll(".fuga")
document.querySelectorAll("[piyo=value]")

上記の例での#hoge, .fugaに関しては速度を求めるならそれぞれ
document.getElementById, document.getElementsByClassNameを利用するほうがよいです

jQueryの独自セレクタ

ショートハンド

ここらはただのショートハンドなので書き換えればいけます

$("[hoge!=value]")
$(":button")
$(":checkbox")
$(":file")
$(":image")
$(":password")
$(":radio")
$(":reset")
$(":submit")
$(":text")
$(":parent")
$(":input")
$(":header")
$(":selected")

document.querySelectorAll(":not([hoge=value])")
document.querySelectorAll("button, input[type='button']")
document.querySelectorAll("[type='checkbox']")
document.querySelectorAll("[type='file']")
document.querySelectorAll("[type='image']")
document.querySelectorAll("[type='password']")
document.querySelectorAll("[type='radio']")
document.querySelectorAll("[type='reset']")
document.querySelectorAll("input[type='submit'], button[type='submit']")
document.querySelectorAll("input[type='text'], input:not([type])")
document.querySelectorAll(":not(:empty)")
document.querySelectorAll("input, select, textarea, button") //多少違うかもしれません
document.querySelectorAll("h1, h2, h3, h4, h5") //使うところまで、もしすべてに対応するならtagNameで判定しないとダメ
document.querySelectorAll(":checked") //options専用のchecked(？)情報ください

eq, gt, ltなど

ここのはsliceだけでいけます

$(":eq(i)")
$(":eq(-i)")
$(":gt(i)")
$(":gt(-i)")
$(":lt(i)")
$(":lt(-i)")
$(":first")
$(":last")

document.querySelectorAll("")[i]
document.querySelectorAll("")[length-i]
document.querySelectorAll("")[i, length-1]
document.querySelectorAll("")[length-i, length-1]
document.querySelectorAll("")[0, i-1]
document.querySelectorAll("")[0, length-1-i]
document.querySelector("") //document.querySelectorAll("")[0] でも可
document.querySelectorAll("")[length-1]

セレクタ実装待ち

$(":has(selector)")

セレクタの実装さえ来ればそのまま書けます
:has() - Can I use

document.querySelectorAll(":has(selector)")

でなければゴリゴリ書かないと無理です
:matches() - Can I use
を使うと短くなるかもです

その他

$(":even")
$(":odd")

document.querySelectorAll("")[2n]
document.querySelectorAll("")[2n-1]

簡単には不可

ここのは割とゴリゴリ書かないとできないです

:animated(animation eventあたりで可能かなと)
:visible, :hidden (すべての条件をかくしか… :hidden - jQuery、クラスで管理できるように変更するといいかもですね)

`.children()`

ここで:scopeの出番の登場です

$dom.children(selector) // == $dom.find("> selector")

dom.querySelector(":scope > selector")

`.closest()`

これはquerySelector使わないのでもはやおまけですね
IEでは使えないので使える場面は限られますが
.closest() - Can I use

$dom.closest(selector)

dom.closest(selector)

参考

あとがき

書きながら検証してて、dom.querySelector(":scope ~ *")みたいな書き方ができなかったのが少し残念でした
jQueryから生jsへの書き換えしてる際に書いておくかって思って書き始めたものなので細かいところが違うかもです…

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up