エンジニアリング

【Selenium講座】第4章: DOMの基本概念

2024.09.26
2024.09.27

この講義では、Seleniumを使ったウェブスクレイピングについて学んでいきますが、まず最初に理解していただきたい重要な概念があります。それが、DOM（Document Object Model）です。

DOMとは、ウェブページをツリー構造で表現したもので、HTMLの各要素が親子関係で繋がっています。これを理解することで、スクレイピングしたいデータがどこにあるのか、どのようにアクセスすればよいのかが見えてきます。

例えば、ウェブページ上で特定のボタンをクリックしたり、情報を取得したりする際、SeleniumはDOMを使ってその要素を探します。また、最近のウェブサイトはJavaScriptによって動的にコンテンツが変更されることも多く、DOMの知識があると、こうした動的な要素にも対応できます。

この講義を進める中で、DOMの理解があると、ウェブスクレイピングがより効率的でスムーズに行えるようになります。では、実際のスクレイピングを始める前に、DOMの基本的な仕組みについて少し見ていきましょう！

1 講座の全体像
2 DOMとは何か
- 2.1 詳細な説明：
3 要素の取得方法とDOMの役割
- 3.1 1. 要素を一意に特定するための属性
- 3.2 子要素・兄弟要素の操作
4 まとめ

講座の全体像

DOMとは何か

DOMは、ウェブページのHTMLやXMLドキュメントを構造化し、プログラムから操作できるようにしたものです。ブラウザはこのDOMを使ってウェブページの要素（テキスト、リンク、ボタン、画像など）を表示・操作しています。DOMはツリー構造を持っており、各HTML要素はノード（node）として表され、親子関係にあります。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <div id="main-content">
      <h1>Welcome to My Page</h1>
      <p class="intro">This is a sample page.</p>
      <a href="https://example.com">Click Here</a>
    </div>
  </body>
</html>

この構造がDOMツリーとしてブラウザ内部で管理されており、Seleniumはこれに基づいて要素を操作します。

以下は、上記のHTMLを元にしたDOMツリー構造です。各ノードが親子関係でどのように繋がっているかを示しています。

<!DOCTYPE html>  (Document Node)
  └── <html>
      ├── <head>
      │   └── <title>
      │       └── "Sample Page"  (Text Node)
      └── <body>
          └── <div id="main-content">
              ├── <h1>
              │   └── "Welcome to My Page"  (Text Node)
              ├── <p class="intro">
              │   └── "This is a sample page."  (Text Node)
              └── <a href="https://example.com">
                  └── "Click Here"  (Text Node)

詳細な説明：

Document Node (<!DOCTYPE html>): ドキュメント全体を表すノード。HTMLのルートノードは<html>タグです。
<html>タグ: ページ全体を包むルート要素。これには<head>と<body>が含まれます。
<head>タグ: メタデータを格納するセクション。この中には<title>タグがあります。
- <title>タグ: ページのタイトルを示します。この例では「Sample Page」というテキストが含まれています。
<body>タグ: ページの主要なコンテンツが含まれるセクション。この中には<div>, <h1>, <p>, <a>などがあります。
- <div id="main-content">タグ: メインコンテンツを包むブロック要素。ここにはid属性が設定されています。
- <h1>タグ: ヘッダー要素で、ページの見出し「Welcome to My Page」が含まれます。
- <p class="intro">タグ: 段落要素で、クラス属性introを持っています。テキスト「This is a sample page.」が含まれます。
- <a href="https://example.com">タグ: ハイパーリンク要素で、「Click Here」というテキストがリンクとして表示されます。

このように、各HTMLタグが親子関係のツリー構造で表されており、Seleniumを使ってスクレイピングする際は、このDOMツリーから特定の要素を選択して操作します。

要素の取得方法とDOMの役割

1. 要素を一意に特定するための属性

DOMの要素を操作する際、Seleniumは特定の方法で要素を選択します。find_element()やfind_elements()を使って、要素をHTMLの属性で指定しますが、これらはDOMの構造を理解していることが前提です。

例えば、以下のような方法があります：

By.ID: id属性を持つ要素を指定します。idはウェブページ内で一意なので、特定の要素を迅速に選択できます。

driver.find_element(By.ID, "main-content")

By.CLASS_NAME: クラス属性を指定して要素を探します。classは複数の要素に同じ値が使われることがあるので、注意が必要です。

driver.find_element(By.CLASS_NAME, "intro")

By.TAG_NAME: 要素のタグ名で指定する方法。例えば、全てのaタグを取得したい場合に使います。

driver.find_elements(By.TAG_NAME, "a")

By.NAME: name属性を使って要素を取得します。主にフォームの入力フィールドなどでよく使用されます。

driver.find_element(By.NAME, "username")

By.XPATHやCSSセレクター: より柔軟にDOM内の要素を指定するために、XPathやCSSセレクターを使用できます。これらはDOMの構造を詳細に理解していないと難しいですが、非常に強力な手法です。

driver.find_element(By.XPATH, "//div[@id='main-content']/a")

子要素・兄弟要素の操作

DOMは親子関係や兄弟関係を持っています。これを理解していると、特定の親要素の下にある要素をピンポイントで取得したり、兄弟要素間を移動することが可能です。

例えば、以下のように親要素の下にある特定の子要素を取得します：

parent_element = driver.find_element(By.ID, "main-content")
child_element = parent_element.find_element(By.TAG_NAME, "h1")

このように、親要素から特定の子要素を取得する場合、DOMツリーの構造が重要になります。

まとめ

この章では、DOM（Document Object Model）の基礎概念について詳しく学びました。

Seleniumで効果的にウェブスクレイピングや自動化を行うためには、DOMを深く理解することが不可欠です。DOMはページの骨格を提供し、要素を特定・操作するための地図のような役割を果たします。特に、動的な要素に対応するための待機や、複雑な構造のページでの効率的な要素取得には、DOMの知識が大いに役立ちます。DOMの理解を深めることで、Seleniumを使った操作がより確実でスムーズに行えるようになります。

次の章では、Seleniumの様々な機能を解説し、特にデータの抽出に役立つ具体的なテクニックについて深掘りしていきます。Seleniumが提供する強力な機能を駆使して、実際にデータを効率的に収集する方法を学びましょう。