マウスでドラッグした部分のXpathを取得したい

Question

プログラミング初心者です。。
PythonまたはJavaScriptで以下を実装しようとしています。

「表示しているウェブサイトからマウスでドラッグした部分のHTMLを取得してXpathに変換する」

ドラッグしてHTMLを取得することはできたのですが、それをXpathに変換する方法が分かりません。全体のHTMLとドラッグした部分のHTMLを比較して変換する方法も検討しましたが、実装出来ませんでした。

・ドラッグした部分のHTMLを取得するソースコード

document.addEventListener('mouseup', function(){
    var selectionObject = window.getSelection(); 
    var selectionDOM = selectionObject.getRangeAt(0).cloneContents(); 
    console.log(selectionDOM);
    selectionObject.removeAllRanges(); 
}, false);

どのようにすれば実装できるか、皆様からアドバイスを頂けますと幸いです。

Xpathにこだっている訳ではないので、
ドラッグしたHTML部分を表す情報を取得出来れば問題ありません。その情報を使って再度そこに行けることが前提とはなりますが。

よろしくお願い致します。

Comments

[otn]

XPath取得の目的は何でしょうか？
スクレイピングに使うのであれば、そういう機械的に作成したXpathはページ構造が少しでも変わると（例えばリロードすると）使えなくなる可能性があります。

プログラミングの練習の題材なら良いのですが。

[gagagaga-1]

大枠の目的としては
取得したXPathを使用してサイトの更新があったか確認をするのが目的です。
下記のような流れを想定しています。
・更新を確認したい部分をドラッグしてHTMLを取得し、その部分を参照できる情報を取得(XPathなど)
・スクレイピングをし、HTMLを取得
・数日後に再度スクレイピングを行い、HTMLを取得する
・数日前のHTMLと直近で取得したHTMLで更新を確認したい箇所を参照、比較する。
・更新があったか確認
となります。
懸念事項としてあげてくださったページ構造が変わった場合に使えなくなるのは承知しています。

[otn]

プログラミング練習目的でなく、Xpathを得るのが目的なら、ブラウザの標準機能で得るXpathでは何がまずいのでしょうか？

[gagagaga-1]

申し訳ございません。
回答が漏れておりました。
プログラミングの練習の一環なので、
全てシステム上で行いたいのです。

Answer 1

全体のHTMLとドラッグした部分のHTMLを比較して変換する方法も検討しましたが、実装出来ませんでした。

落ち着いて考えれば分かると思うのですが。

親へ親へと辿って、最上位のHTMLタグまで辿り、中間含め全部保存しておきます。
HTMLタグから降りてくるときには、タグ名を指定して該当階層のそのタグの一覧を得て、その中の何番目が保存してあるノードに一致するかを調べれば、何番目か分かるので、
`/html/body/div[3]/div[1]/span[2]'
のようなものが得られると思います。

Comments

[gagagaga-1]

ありがとうございます！
実装してみます！