jQueryのfindなどをquerySelectorで書く

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

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

は

```js
Array.from(document.querySelectorAll(selector)).slice(n, m)
```
に読み替えてください

# `$()`, `.find()`
## jQueryの独自セレクタでないもの
これに関してはそのままなのでバーッと
以下のページにあるセレクタ以外はそのまま使えます
[jQuery Selector Extensions - jQuery](http://api.jquery.com/category/selectors/jquery-selector-extensions/)

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

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

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

## jQueryの独自セレクタ
### ショートハンド
ここらはただのショートハンドなので書き換えればいけます

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

```js
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だけでいけます

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

```js
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]
```

### セレクタ実装待ち
```js
$(":has(selector)")
```

セレクタの実装さえ来ればそのまま書けます
[:has() - Can I use](http://caniuse.com/#feat=css-has)

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

でなければゴリゴリ書かないと無理です
[:matches() - Can I use](http://caniuse.com/#feat=matchesselector)
を使うと短くなるかもです

### その他
```js
$(":even")
$(":odd")
```

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

### 簡単には不可
ここのは割とゴリゴリ書かないとできないです

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

# `.children()`
ここで`:scope`の出番の登場です

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

```js
dom.querySelector(":scope > selector")
```

# `.closest()`
これは`querySelector`使わないのでもはやおまけですね
IEでは使えないので使える場面は限られますが
[.closest() - Can I use](http://caniuse.com/#feat=element-closest)

```js
$dom.closest(selector)
```

```js
dom.closest(selector)
```

# 参考

- [CSS リファレンス - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Reference)
- [document.querySelector - MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)
- [:scope - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/%3Ascope)
- [Element.closest() - MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/closest)
- [Element.matches() - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)
- [jQuery Selector Extensions - jQuery](http://api.jquery.com/category/selectors/jquery-selector-extensions/)
- [el.querySelectorはセレクタに自身を含めて検索できる - Qiita](http://qiita.com/kjirou/items/0cdf3c5aa85acbd87437)

# あとがき

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