【連載】jQueryでDOMを取得しよう - 1日目「はじめに」

JavaScriptでWebページをスクレイピングするボットをたまに作っています。スクレイピングをするときにjQueryでDOMを操作をして現在のページの状態を判断したり、その結果どのリンクを踏むかなどを決めたりしています。

DOMの取得について

その、ページの状態の把握をするときにjQueryでDOMを操作するのですが、その基本となるDOMの取得について書きたいと思います。

このDOMの取得がいかに綺麗に正確にできるかがすごい重要だなと最近感じたので、ここにフォーカスして書いていきたいと思います。

連載項目

DOMの取得についてをいくつかの記事に分けて紹介したいと思います。

• タグを指定して取得する
• idやclassを指定して取得する
• 現在の各要素から指定した条件に合致する子孫要素を選択する
• 複数のうちインデックス番号でフィルタリングする
• 現在の各要素から相対的に指定する
• 属性を選択する
• 指定したURLを含むリンクを探す

操作環境について

実行環境は、chromeブラウザのDeveloper ToolsのConsoleに入力して実行していきます。

また、上の画像のように、使用するHTMLは以下のようなものにしておきます。

<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>

このHTMLを使っていろんな取得の仕方でDOMを取得していきたいと思います。