Help us understand the problem. What is going on with this article?

jQueryのfindなどをquerySelectorで書く

More than 3 years have passed since last update.

: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への書き換えしてる際に書いておくかって思って書き始めたものなので細かいところが違うかもです…

S__Minecraft
Coffeescript / Javascript / Go / Java / Typescript
https://s.4na.xyz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした