【連載】jQueryでDOMを取得しよう – 2日目「タグを指定して取得する」

今回は基本となる「タグを指定して取得する」ことについて紹介したいと思います。

1日目でしれっと使ってしまいましたが、改めてこちらの記事で紹介したいと思います。

DOM構成

まずは今回使用するDOMの構成についてです。

<table border=1>
  <tbody>
    <tr>
      <td class="cls001" id="id001"><a href="./gyudon">牛丼</a></td>
      <td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td>
      <td class="cls003" id="id003"><a href="./mentai">高菜明太マヨ牛丼</a></td>
    </tr>
    <tr>
      <td class="cls004" id="id004"><a href="./negi">ねぎ玉牛丼</a></td>
      <td class="cls005" id="id005"><a href="./kimuchi">ねぎキムチ牛丼</a></td>
      <td class="cls006" id="id006"><a href="./okura">かつぶしオクラ牛丼</a></td>
    </tr>
    <tr>
      <td class="cls007" id="id007"><a href="./onisara">シャキッと和風オニサラ牛丼</a></td>
      <td class="cls008" id="id008"><a href="./ponzu">おろしポン酢牛丼</a></td>
      <td class="cls009" id="id009"><a href="./sanma">さんま牛丼</a></td>
    </tr>
  </tbody>
</table>

取得してみる

まずはtrタグを取得してみましょう。

$('tr')

init(3) [tr, tr, tr, prevObject: init(1), context: document, selector: "tr"]

trタグを指定してみると、trタグが3つ取得できました。

わかりにくいのでスクショを撮りました。

次に、trタグの下にtdタグがあるものを取得してみます。

$('tr td')

init(9) [td#id001.cls001, td#id002.cls002, td#id003.cls003, td#id004.cls004, td#id005.cls005, td#id006.cls006, td#id007.cls007, td#id008.cls008, td#id009.cls009, prevObject: init(1), context: document, selector: "tr td"]

このように、9個のtdタグが取得できます。

まだこの記事だけだと何をやっているのかわかりにくいと思いますが、まずはこれが基本となるので覚えておきましょう。