コンテンツにスキップ

XPath と CSS セレクター: Web スクレイピング専門家のための詳細ガイド

Web スクレイピングのスペシャリストとして 10 年以上働いていますが、「XPath セレクターと CSS セレクターを使用するべきですか?」ほど頻繁に起こる質問はほとんどありません。

単一の正解はありませんが、これら XNUMX つの要素選択テクノロジの主な違いを理解することは、より多くの情報に基づいた実践者になるのに役立ちます。

この包括的なガイドでは、Web スクレイピングの観点から XPath と CSS について知っておくべきことをすべて説明します。

  • 起源と進化
  • 構文とクエリ構造
  • 機能と制限事項
  • パフォーマンスに関する考慮事項
  • ブラウザのサポートと標準
  • ツールとライブラリのサポート

私の目標は、開発者とスクレーパーの両方として、特定の Web 抽出ジョブで XPath と CSS をいつ使用するかを決定するために必要な洞察を提供することです。

準備ができて? 飛び込んでみましょう。

小史

XPath は XML ドキュメントのクエリ言語として誕生しましたが、CSS は Web ページのスタイルを設定するために設計されました。

しかし、時間が経つにつれて、それらは自動化とスクレイピングのニーズに対応する強力な要素選択ツールとして登場しました。

XPathの台頭

1990 年代に XML の人気が高まったとき、開発者は複雑なドキュメント内のノードをターゲットにする標準的な方法を必要としていました。

XPath は、こ​​のニーズを満たすために 1999 年に作成されました。

W3C は XSLT および XQuery の主要コンポーネントとして XPath を採用しました。 また、Selenium や Scrapy などの他のソフトウェアには、レンダリングされた Web ページ上で HTML 要素を検索するための XPath サポートが統合されています。

XPath は、DOM をツリーとしてモデル化することにより、上、下、ブランチ間の堅牢なトラバーサル機能を提供しました。

CSS セレクターがユビキタスになる

CSS はスタイル言語として設計されており、タイプ、ID、クラスなどの基本的なセレクターが含まれています。

1990 年代に CSS が Web 開発に不可欠になったとき、ブラウザーは CSS エンジンの最適化に多額の投資を行いました。

このパフォーマンスと遍在性の組み合わせにより、CSS セレクターは Web スクレイピングのニーズにとっても魅力的なものになりました。

Beautiful Soup のようなスクレイピング ライブラリは、高速ロケーター戦略として CSS セレクターを使用しました。

そのため、XPath は XML/HTML ドキュメント全体を対象としていましたが、CSS は目に見える UI 要素のスタイルを設定することに重点を置いていました。

XPath と CSS の構文の比較

いくつかの例を通して、XPath と CSS の構文を解き明かしてみましょう。

次の単純なページを考えてみましょう。

<html>

<body>
  <div>
    <h2>Hello World</h2>
    <p>This is a page</p> 
  </div>

  <ul>
    <li class="highlight"><span>List item 1</span></li>
    <li>List item 2</li>    
  </ul>

</body>

</html>

XPath 構文

DOM はノードのツリーとして扱われます。 XPath はパス式を使用してノード間を移動します。

  • /html/body - を選択 <body> 素子
  • //li[1] – 最初に選択してください <li>
  • //h2/text() – 内部のテキストを取得します <h2>
  • //span/ancestor::ul - に上がります <ul>

いくつかの注目すべき点:

  • DOM の位置に基づく階層構造
  • 「//」はグローバルに検索します。 直接の子の場合は「/」
  • [ ] 述語と関数の場合 position()

CSS セレクターの構文

CSS は、単純なパターン マッチング構文を使用して要素をターゲットにします。

  • body - 選択 <body> タグ
  • .highlight – クラス名で選択
  • ul > li - マッチ <li> 内部 <ul>
  • h2 + p – 隣接兄弟コンビネータ

観察:

  • フラットで非階層的なパターン
  • のような特殊文字 >, + 関係を定義する
  • 木の上を横切る方法はありません

要約すると、XPath は構造化されたドキュメントのクエリを指向しているのに対し、CSS は単純な部分文字列のマッチングを提供します。

XPath と CSS の機能の比較

基本を説明したので、主要な差別化ポイントのいくつかを比較してみましょう。

DOMトラバーサル

  • XPath は上下の両方を通過できます
  • CSS セレクターは下方向のトラバースのみを許可します

これにより、XPath がより柔軟になります。

読みやすさ

  • CSS セレクターは通常、より読みやすく、簡潔です。
  • 長い XPath 文字列は複雑になる可能性があります

したがって、より単純なクエリの場合は CSS が有利です。

性能

  • 多くの場合、CSS セレクターはブラウザーの最適化により高速になります。
  • しかし、複雑なページの場合、その差は縮まります

ほとんどの場合、速度は同等です。

部分一致

  • XPath のサポート contains() 部分的なテキスト検索の場合
  • CSS にはネイティブ サポートが不足しており、一部の疑似クラスは完全一致でのみ機能します。

ここでは、XPath の機能が優れています。

言語サポート

  • XPath は XML と HTML の両方をクエリできます
  • CSS は HTML/DOM でのみ機能します

XPath は両方のデータ形式に役立ちます。

スクレイピングするときにどれを使用するか?

それぞれの機能に基づいて、XPath または CSS をデフォルトに設定するタイミングに関する推奨事項をいくつか示します。

次のような場合に XPath を優先します。

  • DOM ツリーを上にたどります
  • テキスト値を部分的に検索する
  • クエリ XML (HTML だけではありません)
  • 高度な条件付きロジックを使用する

次の場合は CSS セレクターを優先します。

  • 短くて単純なクエリを作成する
  • ブラウザの最適化を活用する
  • Beautiful Soup などのライブラリをサポート
  • 表示されている UI 要素を見つける

しかし、厳密なルールはありません – どちらがより適しているかは経験によってわかります。

多くの場合、両方を一緒に使用することが最適なアプローチです。

ブラウザのサポートと標準

最新のブラウザはすべて、XPath と CSS を完全にサポートしています。

特徴クロムFirefoxのSafari
XPathはいはいはい
CSSセレクターはいはいはい

これらはどちらも Web 標準です。

  • XPath は W3C 推奨です
  • CSSはW3Cによって標準化されています

したがって、両方のテクノロジーに対する優れたクロスブラウザーのサポートを利用できます。

結論と重要なポイント

XPath と CSS のどちらを選択するかは、パフォーマンスよりも機能によって決まります。

私がお勧めするのは、両方に精通して、ユースケースに基づいて選択することです。

単純な要素の検索の場合は、読みやすさを考慮して CSS を推奨します。

堅牢な DOM トラバーサルまたは部分一致が必要な場合は、XPath を使用します。

可能であれば、XPath と CSS を一緒に利用して、その総合力を活用してください。

Web からデータを抽出した経験があれば、XPath セレクターと CSS セレクターを最大限に活用するタイミングが自然にわかります。

このガイドが、Web スクレイピングの主な強み、相違点、および Web スクレイピングのニーズに対するアプリケーションの包括的な概要を提供できたことを願っています。

抽出を楽しんでください。

会話に加わります

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *