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

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

推薦する

なぜ人工知能は過大評価されているのでしょうか?

他の新しいテクノロジーと同様に、AI もハイプ サイクルと呼ばれる段階を経ます。それらはテクノロジー...

AIの有効性はサイバーセキュリティでは限られているが、サイバー犯罪では無限である

AI は大きな可能性を秘めているにもかかわらず、サイバーセキュリティにおける AI の応用は非常に限...

AI人材獲得をめぐる世界的な戦いにおいて、子どものプログラミングはどれほどの影響力を持つことができるのでしょうか？

[[226531]]人工知能の発展において、人材の確保は間違いなく重要な鍵となります。人工知能は、...

Metaは独立したAI画像ジェネレーターを立ち上げました。現在は無料ですが、英語のプロンプトのみをサポートしています。

ITホーム 12月7日、Metaは新しい独立したAI画像ジェネレーター「Imagine with ...

...

李開復は「口を滑らせた」と言ったのか？ AIデータのプライバシーが心配です!

[[341971]]シノベーションベンチャーズの会長兼CEOである李開復氏は9月12日、HICOO...

2020 年の人工知能の機会と課題について考える: 誰が勝つでしょうか?

近年、テクノロジーとビジネスニーズのギャップにより、人工知能は産業実装の過程で一連の課題に直面してい...

生成AIはスマートホームの触媒となる

ラスベガスで開催される2024年コンシューマー・エレクトロニクス・ショーが終わりに近づく中、LGやサ...

大規模なモデルをトレーニングするのは本当に難しいのでしょうか?事前トレーニング済みで使いやすく、非常に効率的な「Li Bai」モデル ライブラリが登場しました。

LiBai モデル ライブラリは、Hugging Face、Megatron-LM、DeepSpe...

XiaoIceが11人のAI歌手を一気にリリース：プロの歌手に匹敵するにはたった45日間のトレーニングが必要

11月25日、 XiaoIceフレームワークは11人のAI歌手をリリースし、アシスタント、同僚、親戚...

FFH—AI 詩作 HttpRequest 練習

オープンソースの詳細については、以下をご覧ください。 51CTO オープンソース基本ソフトウェアコミ...

ビッグデータの機械理解の秘密：クラスタリングアルゴリズムの詳細な説明

クラスタリングは、ビッグデータを理解する上で非常に一般的かつ基本的な方法です。最近、データ サイエン...

99行のコードでアナと雪の女王の特殊効果の太極拳の進化を実現

コンピュータシミュレーション技術の継続的な発展のおかげで、ますますリアルな現実世界をコンピュータで再...

アリババ人工知能ラボ：テクノロジーがあなたの生活をどう変えるかを見てみましょう

[PConline News] ジャカルタアジア競技大会が閉幕し、アジア競技大会は正式に杭州タイムに...

人工知能に置き換えられる可能性が最も高い 12 の職業、あなたの職業もその中に含まれていますか?

AlphaGo が囲碁の名人に勝利し、百度の無人自動車が第五環状線を走行し、マイクロソフトの Xi...