インタープリタパターンを使用して、要素のXPathパスを取得するためのアルゴリズムを実装します。

インタープリタパターンを使用して、要素のXPathパスを取得するためのアルゴリズムを実装します。

[[432233]]

文章

1. 通訳モード

言語に対して、その文法表現（言語のルールを定義するために使用される、言語内の文法記述ツール）を与え、その言語で定義された文を解釈するインタープリタを定義します。

定義は抽象的に聞こえるかもしれません。たとえば、一般的な Web サイトで多言語を実装する場合、まず言語の種類を決定し、さまざまな言語のコーパスを事前に設計する必要があります。次に、構成と統一された変数ルールに基づいて、それらをさまざまな言語にマッピングします。

2. 要素のXpathパス

XPath は、XML ドキュメント内の要素と属性を移動するために使用されます。 XPath は XML ノードの検索に使用されますが、HTML と XML は構造が似ているため、HTML ドキュメント内のノードの検索にも使用できます。ここでは HTML、つまり HTML ページ内で要素が配置されているパスのみを考慮します。

では、要素の Xpath パスを素早く取得するにはどうすればよいでしょうか。実はとても簡単です。Google デバッグ ツールを開いてみましょう。

要素の XPath パスをコピーするには、[XPath のコピー] を選択します。形式は次のようになります。

  1.  //*[@id= "juejin" ]/div[2]/main/div/div[1]/article/div[1]

要素の Xpath パスを取得するアプリケーション シナリオは多数あります。たとえば、よく使用する Python クローラーは、クローラー フレームワークを使用して、Xpath パスを介してページ内の dom ノードを簡単に制御し、目的のデータと要素を取得できます。たとえば、要素の Xpath パスをバックエンドに送信すると、バックエンドは特定の機能の使用状況とインタラクション データをカウントできます。たとえば、Web サイトを閲覧しているユーザーの熱分布マップ、パス ポートレートなどを分析できます。

3.jsは要素のXpathパスの取得を実装します

実装する前に、まず Xpath パスの構造を分析してみましょう。たとえば、ページがある場合、要素 span の構造は次のようになります。

  1.  <!DOCTYPE html>
  2.  <html lang= "ja" >
  3.  <ヘッド>
  4.  <メタ文字セット= "UTF-8" >
  5.  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  6.  <meta http-equiv= "X-UA-compatible" content= "ie=edge" >
  7.  <title>ドキュメント</title>
  8.  </head>
  9.  <本文>
  10.  <div>
  11.  <span>私は徐小曦です</span>
  12.  </div>
  13.  </本文>
  14.  </html>

その場合、Xpath パスは次のようになります。

  1.  HTML/BODY|HEAD/DIV/SPAN

上記からわかるように、右端の要素がターゲット要素であり、左端の最初の要素が最も外側のコンテナーです。このプロセスを完了するには、まず、要素の parentNode を介して現在の要素の親要素を取得し、最上位の位置を見つける必要があります。ただし、前のレイヤーを見つけるたびに、その要素の前の兄弟要素もトラバースする必要があることにも注意する必要があります。この兄弟要素の名前がその後ろの要素の名前と同じ場合は、要素名に 1 を追加します。

最初のステップは、同じレベルの兄弟要素を走査するメソッド getSameLevelName を実装することです。

  1.  // 兄弟要素の名前を取得する
  2. 関数getSameLevelName(ノード){
  3.     // 兄弟要素がある場合
  4.     if(node.previousSibling) {
  5.         let name = '' , // 返される兄弟要素名の文字列
  6. count = 1, // 隣接する兄弟要素内の同じ名前を持つ要素の数
  7.            ノード名 = ノード.ノード名、
  8.            兄弟 = node.previousSibling;
  9.         while(兄弟){
  10.             if(sibling.nodeType == 1 && sibling.nodeType === node.nodeType && sibling.nodeName){
  11.                 if(nodeName == 兄弟.nodeName){
  12. 名前+= ++カウント;
  13.                 }それ以外{
  14.                     // 同じ隣接ノード名を持つノードの数を再作成します
  15. カウント= 1;
  16.                     // 新しいノード名を追加
  17. 名前+= '|' + 兄弟ノード名.toUpperCase()
  18.                 }
  19.             }
  20.             兄弟 = 兄弟.前の兄弟;
  21.         }
  22. 戻る 名前 
  23.     }それ以外{
  24.         // 兄弟要素がない場合は''を返します 
  25. 戻る  ''  
  26.     }
  27.  }

2 番目のステップは、ドキュメント ツリーをトラバースすることです。

  1.  // XPathインタープリタ
  2. インタープリタ = (関数() {
  3. 戻る 関数(ノード、ラップ){
  4.  // パス配列
  5. パス = [] とします。
  6.  // コンテナノードがない場合、デフォルトはドキュメントです
  7. wrap = wrap || ドキュメント;
  8.  // 現在のノードがコンテナノードと等しい場合
  9. if(node ​​=== wrap) {
  10. ラップノードタイプ == 1 の場合
  11. パスをプッシュします(wrap.nodeName.toUpperCase())
  12.  }
  13. 戻り経路
  14. }
  15.  // 現在のノードの親ノードがコンテナノードと等しくない場合
  16. if(node.parentNode !== wrap){
  17.  // 現在のノードの親ノードに対してトラバーサル操作を実行します
  18. パス = arguments.callee(node.parentNode, wrap)
  19.  }
  20.  // 現在のノードの親要素ノードがコンテナノードと同じ場合
  21. それ以外{
  22.  wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase())
  23.  }
  24.  // 要素の兄弟要素の名前統計を取得します
  25. 兄弟の名前を getSameLevelName(ノード) にします。
  26. ノードのノードタイプが1の場合
  27. path.push(node.nodeName.toUpperCase() + サブリング名)
  28.  }
  29.  // 最終的なパス配列の結果を返す
  30. 戻り経路
  31. }
  32.  })()

これら 2 つの方法を使用すると、要素の XPath パスを簡単に取得できます。次に例を示します。

  1.  path = Interpreter(document.querySelector( 'span' ))とします。
  2.  console.log(パス.join ( '/' ))

これは、開始と同じデータ構造を返します。例: HTML/BODY|HEAD/DIV/SPAN

<<:  10の古典的なソートアルゴリズム

>>:  人工知能の時代においても、人間同士の交流は依然として重要である

ブログ    

推薦する

HKU などが GraphGPT をリリース: パラメータを 1/50 に微調整し、精度を 10 倍向上! LLMは長いトークンなしでグラフ構造を理解できる

グラフニューラルネットワークは、グラフ構造のデータを分析および学習するための強力なフレームワークとな...

「CNNの父」ヤン・ルカン氏：人工知能には脳がなく、そのIQは犬ほど高くない

ビッグデータダイジェスト制作ディープラーニングの三大巨頭の一人として知られるヤン・ルカン氏は、常に楽...

...

Gemini vs ChatGPT: Google の最新 AI と ChatGPT のどちらが優れているのでしょうか?

Google は、最新かつ最も強力な AI モデルである Gemini 1.0 を発表し、AI の...

最初のライブ放送ではメリットが伝えられ、スマートハードウェアについての話を聞くことができます

市場でのスマートハードウェアの人気が徐々に高まり、また、伝染病の予防と制御によってスマートハードウェ...

マスク氏が「ブレインカッター」を募集！ Neuralink が初の人体実験を公式に発表。ALS 患者は「数秒でホーキング博士に変身」するのでしょうか?

マスク氏の世界で「脳コンピューターインターフェース」を開発している企業、Neuralink は本日、...

ChatGPT Enterprise Editionが登場: 史上最強のバージョン、無制限の使用と32kコンテキストを備えた2倍のGPT-4

ChatGPTはリリースされてから9か月が経ちました。この 9 か月間、この驚異的なアプリケーショ...

新しい研究：ハトは人工知能と同様の方法で問題を解決する

オハイオ州立大学とアイオワ大学の研究者による研究で、ハトは問題を解決する際に人工知能に似た「力ずく」...

スタンフォード大学の人工知能レポート: 今からでも遅くはない

スタンフォード大学は3月3日、2021年人工知能指数レポートを発表しました。その中で、AI関連の学習...

人工知能のゲーム理論：エージェントと人間、エージェントと環境の間のゲーム関係の予備的調査

人工知能 (AI) は、コンピューターや機械をインテリジェントに動作させる方法を研究する分野です。機...

ディープラーニングにおける8種類の畳み込みを視覚的に理解する

この記事では、ディープラーニングでよく使用される 8 種類の畳み込みについてまとめ、非常に鮮明な方法...

推薦システムにおける大規模言語モデルの実用化

1. 背景と課題従来の推奨モデルのネットワークパラメータの影響は比較的小さく（埋め込みパラメータを除...

ニューラルネットワークの仕組みを1つの記事で学ぶ

出典: getwallpapers.comディープラーニングは機械学習の重要な分野の 1 つです。そ...

技術的負債の高利クレジットカード: 最もよく知られているエンドツーエンドの機械学習プラットフォームを詳しく調べる

この記事は、公開アカウント「Reading the Core」（ID: AI_Discovery）か...

ライブ放送週レビュー日記1日目: 価値の再形成の力についての洞察、機会と課題が目の前にあります

5月9日、Amazon Web Servicesと51CTOが共同で「This is My Arch...