jQueryで使われやすそうなDOM要素取得方法一覧

## はじめに
今回はjQueryのDOM要素取得方法について復習がてら学んだことを発信しようと思います。
現在私はフロントエンド界隈で有名なjQueryの参考書である[ドーナツ本](https://coliss.com/articles/book-review/isbn10-4048913913.html)を使って勉強をしているのですがこの参考書を隅から全て勉強するとなると非効率的だと思いました。なので今回はdom要素取得方法について私なりに参考書の中から厳選してお届けします。

##要素セレクター
現場に参画した方ならおそらく見たことあるであろう基本的なものです。

```ruby:index.html
<ul>
    <li id="first" class="first">hogehoge</li>
    <li id="secound" class="secound">hogehoge</li>
    <li id="third" class="third">hogehoge</li>
    <li id="fourth" class="fourth">hogehoge</li>
    <li id="fifth" class="fifth">hogehoge</li>
</ul>

``` 
上記のようなhtmlがあり、この中の`<li>`セレクターを全て取得したい時、以下のようにscriptタグ内に記述します。

```ruby:index.html
<script>
$(function(){
   $("li").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>
```
今回取得している`<li>`要素はクラスでもid要素でもないので単純に`$("li")`と指定して`<li>`要素を取得しています。

##IDセレクター
下記を見てください。id名の前に#をつけてあげることによって`id="first"`を持つ要素を取得することができます。

```ruby:index.html
<script>
$(function(){
   $("#first").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>
```
これでid名を取得することもできますがもっと限定的に要素を取得したい場合は以下のように書くといいでしょう。

```ruby:index.html
<script>
$(function(){
   $("li#first").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>
```
`#id`の前に要素セレクターをつけてあげることによって`id="first"`を持つ`li`要素だとjQueryが判断してくれます。

##クラスセレクター
今度は取得したクラス名の前にカンマを売ってあげるだけです。

```ruby:index.html
<script>
$(function(){
   $(".first").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```

id要素取得の時と同様に

```ruby:index.html
<script>
$(function(){
   $("li.first").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```
と指定することも可能です。

##グループセレクター
これは取得したい要素が複数ある時に使えます。以下をご覧ください。

```ruby:index.html
<script>
$(function(){
   $(" #first , #third ").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```
上記のようにコンマで二つの要素を繋げて指定するだけでOKです。

##nth-child擬似クラス
これは取得した要素を番号で指定して取得することができます。以下をご覧ください。

```ruby:index.html
<script>
$(function(){
   $("li:nth-child(3)").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```

上記を実行すると3番目の`<li>`要素が取得できます。書き方ですが取得したい要素と`nth-child(3)`の間に`:`が入っているのに注意してください。ちなみに番号を指定する部分に`even`(偶数)、`odd`(奇数)を指定することも可能です。
似たようなもので`nth-of-type()`というものがありますが`nth-child()`との違いはごっちゃになるので注意。[この記事](https://qiita.com/shunsuke227ono/items/6c9916f80d82b73a7025)が分かりやすかったです。

##eqセレクター
こちらも`nth-child()`に似ているのですが`eq:()`で指定したセレクターの中から指定した順番の同等の物を取得してきます。つまり`ul`タグ内にある4番目の要素を取得して処理してくれます。ちなみに`nth-child()`の時と違って今回は0から数えていきますので3を指定した時は4番目の`<li>`が取得できるわけです。

```ruby:index.html
<script>
$(function(){
   $("li:eq(3)").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```

##ltセレクター
こちらは英語のless thanの省略形となっております。こちらを使うことで特定のセレクターより前に位置している要素全てを取得できます。先ほどの例で説明すると、

```ruby:index.html
<script>
$(function(){
   $("li:lt(3)").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```
こちらを実行すると3を指定しているので4番目より前の要素、つまり1,2,3番目の要素を全て取得して処理をしてくれます。

##gtセレクター
こちらはltセレクターと真逆で英語でgreater thanの略語となります。

```ruby:index.html
<script>
$(function(){
   $("li:gt(3)").css("color","red")
//.css()で取得要素のcssを指定することができます。
})
</script>

```

こちらでは3を指定しているので4番目よりさらに後の要素、つまり5番目の`<li>`要素を取得して処理をしてくれます。

以上です。

上記に紹介したドーナツの本では20個近い取得方法が紹介されていました。
jQueryに興味のある方はぜひ手にとって読んでみてください。

最後までお読みいただきありがとうございました。