【連載】jQueryでDOMを取得しよう – 3日目「idやclassを指定して取得する」

今回もjQueryの基本となるところになると思います。今回は要素についているidやclassを取得する方法を紹介したいと思います。

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>

idを指定して取得してみる

まずはidを指定して取得します。idを指定するときは最初に"#"をつけて指定してます。

とろーり3種のチーズ牛丼が食べたいので、それを取得してみます。

$('#id002')

init [td#id002.cls002, context: document, selector: "#id002"]

$('#id002')[0]

<td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td>

このように、idを指定して取得することができます。もちろん以下のような取得の仕方もできます。

$('td#id002')[0]

<td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td>

このようにタグを指定しつつidを指定することもできます。

classを指定して取得してみる

classを指定する方法は、最初に"."をつけて指定します。idでは#でしたがclassは.なだけです。それだけの違いです。それ以外は同じだと思って使えば使えます。

さんま牛丼の取得の仕方は以下のようになります。

$('.cls009')[0]

<td class="cls009" id="id009"><a href="./sanma">さんま牛丼</a></td>

まとめ

今回の記事をまとめると、idは#、classは.を頭につけてあげると取得できる。です。