「xpath」の記事 - Crieit

JavaScriptのpostMessageでDOMツリーのノード参照を渡す方法[Xpath]

2020-08-24T18:47:06+09:00

ポップアップしたウィンドウに要素の参照（DOMノード）を送りたかったので、この記事を書いた。

Web MessagingはDOMノードを送れない

JavaScriptでは、window.postMessageを使うことで、ポップアップやiframeなどの別ウィンドウとWeb Messaging(HTML5)を介して通信することができる。

子ウィンドウ、親ウィンドウへの参照はそれぞれwindow.open()とwindow.openerで持つことができるから、window.postMessageと併せてあらゆるデータのやり取りが自由にできそうなものである。

しかし、window.postMessageでは送ることができないデータがある。

MDN web docsには、messageについて

他のウィンドウに送られるデータ。データは the structured clone algorithm に従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを渡すことができます。
(window.postMessage - Web API | MDN)

と書かれている。

この「the structured clone algorithm」（日本語「構造化複製アルゴリズム」）という部分が重要で、この中で「構造化複製で動作しないもの」というのが示されいる。

Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DATA_CLONE_ERR 例外が送出されます。

DOM ノードを複製しようとしても同様に DATA_CLONE_ERR 例外が送出されます。

つまり、例えばdocument.querySelector()などを使えば要素の参照を取得できるが、このような参照はWeb Messagingで送ることができない。
実際にwindow.postMessageでDOMノードを送ろうとすると、

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': HTMLButtonElement object could not be cloned.

のようなエラーが発生する。

ウィンドウ間で互いのDOMの参照はできるのだから、DOMノードも送れるべきである。
そこで、住所のように、テキストでDOMツリーにおけるノードの位置を表現できる方法を探していると、「Xpath」という言語構文を見つけた。

Xpathとは

Xpathとは、XMLやHTMLのようなツリー状の階層構造を持つ文書で、様々なノードの位置や情報を表すことができる記法のことである。URLのようなパス表記ができることが特徴。

Introduction to using XPath in JavaScript | MDN

記法についてはこちらの記事が詳しいが、ざっくり言うと、例えばbody直下の

にアクセスするためのXpathは

/html/body/h1

となる。

また、2番目の

の3番目のにアクセスするためのXpathは

/html/body/div[2]/span[3]

といったように表すことができる。

要素のXpathを取得して送信する

まず、送るためにはDOMノードのXpathを取得する必要がある。
以下の記事のコードを使用して送信側のスクリプトを書いた。

ブラウザ上のクリックした要素のXpathを取得する - Qiita

parent.htmlのjs


let childWindow = window.open('child.html', 'child', 'width=300,height=400,scrollbars');

// クリックされたらその要素のXpathを子ウィンドウにpostMessageする
window.addEventListener('click', (e) => {
    childWindow.postMessage(getXpath(e.target), 'http://localhost');
});

/* https://qiita.com/narikei/items/fb62b543ca386fcee211 */
function getXpath(element) {
    if(element && element.parentNode) {
        var xpath = getXpath(element.parentNode) + '/' + element.tagName;
        var s = [];

        for(var i = 0; i < element.parentNode.childNodes.length; i++) {
            var e = element.parentNode.childNodes[i];
            if(e.tagName == element.tagName) {
                s.push(e);
            }
        }

        if(1 < s.length) {
            for(var i = 0; i < s.length; i++) {
                if(s[i] === element) {
                    xpath += '[' + (i+1) + ']';
                    break;
                }
            }
        }

        return xpath.toLowerCase();
    } else {
        return '';
    }
}

要素のXpathを受け取って参照する

受信側は以下のようになる。

child.htmlのjs

let parent = window.opener.document;

function receiveMessage(e) {
    if (e.origin !== "http://localhost") {return}
    parent.evaluate(e.data, parent, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue.innerHTML = 'ok!';
}

window.addEventListener("message", receiveMessage);

Introduction to using XPath in JavaScript | MDN

成功すると、親ウィンドウでクリックした要素に「ok!」と表示されるはず。
これで、親ウィンドウから子ウィンドウに送られたXpathを使って、子ウィンドウが親ウィンドウのDOMを参照し、当該要素にアクセスすることが可能になった。もちろんその逆も可能である。

XPath基礎編（2）ー XPathの書き方

2020-05-22T10:17:55+09:00

前回の記事では、XPathの基本概念を簡単に紹介しました。今回はXPathによるWebページ（HTML）からデータを指定・取得する方法、つまりXPathの書き方を紹介します。

1.タグ（要素）で指定する

下記のHTMLサンプルで、文章がのように、といった記号で囲まれているのが分かります。このようなといった記号を、タグと言います。

<タグ名>ここにコンテンツが入ります...

最初のタグを「開始タグ」、終わりのタグを「終了タグ」といいます。そしてこの開始タグから終了タグまでの全体を、要素と呼びます。

下記のHTMLの中で赤色で表示された部分はタグです。（Firefoxで青色、Chromeでは紫色で表示されます。）

下記はHTMLでよく見かけるタグのまとめです。詳しくのはこの記事を合わせてご覧ください！

XPathの最も一般的な書き方は、スラッシュ “/” で区切りながらタグを記述します。

例えば、このHTMLから『Harry Potter』を取得したい場合は、ツリー構造の上から順に『htmlタグ→bodyタグ→h1タグ』と指定できます。次のように書きます。

/html/body/h1

また、『//』を用いて、途中までのパスを省略することができます。

//h1

タグを複数に合致する場合に、N番目のタグを指定することができます。この例では、『7,631円』を取得する場合、「div」の行から2行目の「span」であるため、次のように書きます。

//div/span[2]

抽象化にすると、タグ（要素）で書くXPath構文はこうなります。

//タグ名
//タグ名/タグ名

2.属性で指定する

属性とはタグの中に記載されていて、タグの情報を細かく表すものです。タグに属性をつけることで、要素の効果を指定したり、具体的な指示を付け加えることが出来ます。属性は通常、「id="booksTitle"」のように表示されます。なお、属性は複数指定する事も可能です。

<タグ名 属性名="属性値">

最も一般的な属性には、href、title、style、src、id、classなどがあります。詳しくはこの記事を合わせてご覧ください！

XPathでは属性を『@』の関数で表します。

例えば、『Harry Potter』を取得したい場合、XPathは次のように書きます。

//h1[@id="booksTitle"]

抽象化にすると、属性で書くXPath構文はこうなります。

//タグ名[@属性名="属性値"]

もし同じ属性を持つすべての要素を取得する場合、次のように書きます。

//*[@属性名="属性値"]

3.テキストで指定する

下記のようにタグで囲まれているのはテキストです。

<タグ名>ここにテキストが入ります...

Webページからデータを取得するのは、通常ページ内のコンテンツまたはテキストを取得することです。ですから、取得したいテキストを直接指定することができます。

XPathではテキストを『text()』の関数で表します。

例えば、『Harry Potter』を取得したい場合、テキストで指定すると、次のように書きます。

//h1[text()="Harry Potter"]

抽象化にすると、属性で書くXPath構文はこうなります。

//タグ名[text()="取得するテキスト"]

もし同じテキストを持つすべての要素を取得する場合、次のように書きます。

//*[text()="取得するテキスト"]

4.タグ関係で指定する

HTMLのツリー構造において、すべての要素が親子／兄弟関係を持っています。

1つまたは複数の要素を含む要素は親要素と呼ばれ、含まれる要素は子要素です。子要素は1つのみの親があり、親の開始タグと終了タグの間にあります。同じ親を持つ要素は兄弟要素と呼ばれます。

具体的な例も見てみましょう。

以下のサンプルは、[body]要素を基点に、[body]要素は[h1]要素と[div]要素の親で、[h1]要素と[div]要素は、[body]要素の子です。親子／兄弟関係にある要素を取得し、それぞれにスタイルを変更する例です。

[h1]要素と[div]要素は、同じ親[body]要素を持つため、兄弟要素です。

また、[div]要素は2つの[span]要素の親ですから、2つの[span]要素は[body]要素の子孫要素です。

カレント要素を基点として、親子、もしくは兄弟関係にある要素を取得することができます。例えば、『7,631円』を取得したい場合、タグの関係で指定すると、下記のように書くことができます。

[div]要素の子要素とする場合

//div/span[2]

[body]要素の子孫要素とする場合

//body//span[2]

[span class="author notFaded"]要素の兄弟要素とする場合

//span[@class="author notFaded"]/following-sibling::span[1]

[span class="tax_postage"]要素の兄弟要素とする場合

//span[@class="tax_postage"]/preceding-sibling::span[1]

兄弟関係のあるタグを指定するには『following-sibling::』と『preceding-sibling::』という2つの関数をよく使います。

『following-sibling::』は、指定された要素より後の兄弟要素を指定する
『preceding-sibling::』は、指定された要素より前の兄弟要素を指定する

『following-sibling::』は、テーブル要素を指定する時に大活躍します。例えば、下記のHTMLサンプルがあります。

このHTMLはページに変更すると、以下のようなテーブルの形になります。

この例では、店名の『12345』取得します。ただし、[td]要素が複数あり、//td[1] で対応できなくなります。また、もし複数のページから、同じ構造のテーブルを一括取得する場合、固定的な値「店名」を基点として、『following-sibling::』を使うほうが薦めです。次のように書きます。

//th[text()="店名"]/following-sibling::td[1]

抽象化にすると、タグ関係で書くXPath構文はこうなります。

もし上記の構文で複数に合致する場合に、[Ｎ] を付けてN番目のタグを指定することができます。

いかがでしょうか？以上は最も使われるXPath書き方です。さっそくお試してみてください。次回はXPathによく使われる関数を紹介します。お楽しみに！

元記事：https://helpcenter.octoparse.jp/hc/ja/articles/360013122059

XPath基礎編（1）ー XPathの基本概念

2020-05-21T12:08:13+09:00

Webサイト上からデータを自動的に取得するには2つの方法があります。1つはPythonなどのプログラミング言語でWebクローラーを作る、もう1つはOctoparseのようなWebスクレイピングツールでデータを取得するのです。しかし、どれにしても、XPathは重要な役割を果たしています。XPathの書き方が分かれば、データをより正しくて効率的に取得できます。

それでXPathのシリーズではXPathの基本概念からXPathの書き方、応用まで詳しく紹介したいと思います。

この記事では、XPathの基本概念を簡単に紹介します。

1. XPathとは？

XPath (XML Path Language)とは、ツリー構造となっているXML/HTMLドキュメントからの要素や属性値などを指定するための簡潔な構文(言語)です。
Webページは通常HTMLで記述されるから、XPathはWebページの情報を取得する時によく利用します。ブラウザ（Chrome、Firefoxなど）でWebページのHTMLを表示するする場合、F12キーを押すことで、対応するHTMLドキュメントに簡単にアクセスできます。

2. XPathの仕組み

XPathは具体的にはどのように動作するのかを見てみましょう。下記の画像はHTMLドキュメントの一部です。

HTMLは、ツリー構造のように、異なるレベルのがあります。この例では、レベル1はbookstoreで、レベル2は
bookです。Title、author、year、priceはすべてレベル3です。

山括弧（など）を含むテキストはタグと呼ばれます。HTMLの要素は通常、開始タグと終了タグで構成され、その間にコンテンツが挿入されます。以下の形になります。

<○○>(開始タグ)ここにコンテンツが入ります... (終了タグ)

XPathはスラッシュ “/” で区切りながら階層を記述し、基準となるノードから別のノードを指定できます。URLと似ています。この例では、要素「author」を検索する場合、XPathは次のようになります。

/bookstore/book/author

それがどのように機能するかをよりよく理解するには、コンピューター上の特定のファイルを見つける方法を参照してください。

「author」という名前のファイルを見つけるには、正しいファイルパスは \ bookstore \ book \ authorです。

コンピューター上のすべてのファイルには独自のパスがあるように、Webページ上の要素もパスがあります。そのパスはXPathで記述されています。

ルート要素（ドキュメントの一番上の要素）から始まり、中にあるすべての要素を経由して目標要素に至るXPathは、絶対XPathと呼ばれます。

例：　/html/body/div/div/div/div/div/div/div/div/div/span/span/span…

絶対XPathは長くて混乱する可能性があるため、絶対XPathを単純化するために、「//」を使用して途中までのパスを省略することができます（短いXPathとも呼ばれる）。

たとえば、

絶対XPath：　　/bookstore/book/author
短いXPath：　　//author

3. XPathを表示・書くには

【Google Chromeの場合】

Chromeでこのページを表示し、右クリックメニューの[検証]から開発者ツールを表示します。Elementタブのhtmlで、要素を右クリックします。メニューの[Copy] → [Copy XPath ] でその要素を取得するためのXPathがクリップボードにコピーされます。

表示されているElementタブのhtmlから “Ctrl + F” で検索欄を表示します。XPathを入力すると、得られる要素が選択されるはずです。

また、「XPath Helper」という拡張機能を追加することもできます。XPathを入力すると、一致する結果が表示されます。（XPath Helperをインストールする)

【Firefoxの場合】　

Firefoxの旧バージョンに搭載されている拡張機能「Firebug」が利用できます。（Firebug&FireXPath拡張機能をインストールする方法)

FirefoxでWebページを開く➡Firebugボタンをクリック➡ページ内の要素をクリック➡その要素のXPathが表示されます。

以上はXPathの基本概念でした。次回はXPathの書き方を紹介しますので、お楽しみにしてください！

元記事：https://helpcenter.octoparse.jp/hc/ja/articles/360015765513

「xpath」の記事 - Crieit

JavaScriptのpostMessageでDOMツリーのノード参照を渡す方法[Xpath]

XPath基礎編（2） ー XPathの書き方

XPath基礎編（1）ー XPathの基本概念

XPath基礎編（2）ー XPathの書き方