インタープリタパターンを使用して、要素の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の古典的なソートアルゴリズム

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

ブログ    
ブログ    
ブログ    
ブログ    

推薦する

大規模な山火事をどうやって消火するか？ドローンがコンビネーションパンチを繰り出す！

環球時報などの報道によると、春の干ばつ、少雨、強風の影響で、18日にモンゴルで草原の山火事が発生した...

ロボット介護は人間に比べて高齢者にとって負担が少ない？

最近、浙江省金華市のある家族の監視ビデオがインターネット上で話題になった。動画の全長は3分15秒。こ...

機能テストケース自動生成アルゴリズム ペアワイズ

[[433685]]ペアワイズアルゴリズムとは何ですか?次のテストシナリオの場合:ブラウザ: M、O...

2021 年のデジタル トランスフォーメーションの 10 大トレンド

2020 年に私たちがどうなるかは誰も予測できませんでした。過去 6 か月だけでも、過去 10 年間...

...

コンピュータニュース 2016年第9号 (人工知能、革命の喪失)

...

...

...

アルファベットのウィングがドローン配達サービスをダラス・フォートワース地域に導入

ドローンはまもなく、タイレノールとバンドエイドが詰まった小型容器を積んでダラス・フォートワース上空を...

ドローンは思考によって制御される新しい方法を経験しており、その商業的展望は非常に刺激的です。

近年、ドローン業界は非常に急速な発展を遂げていると言えます。製品面では数量が大幅に増加し、種類もます...

マスク氏の AI ツール Grok は ChatGPT のシェルですか?

イーロン・マスク氏の人工知能企業xAIは最近、GroKと呼ばれる人工知能チャットボットをリリースした...

貢献も革新もアイデアもない、ML 分野の博士課程の候補者が助けを求めています。論文を革新的にするにはどうすればよいでしょうか?

[[420317]]この記事はAI新メディアQuantum Bit（公開アカウントID：QbitA...

Google Gemini の大きな転換？ Stanford Meta Chinese は推論性能が GPT-3.5 よりも優れていることを証明

Gemini の推論能力は本当に GPT-4 よりも弱いのでしょうか?以前、Google の大ヒット...

AGVロボットマルチエージェント経路探索の4つの主要な研究方向

マルチエージェント経路探索 (MAPF) は、人工知能、ロボット工学、理論計算機科学、実践的オペレー...

...