0

次のWebページからテーブルを取得しようとしています

http://www.bloomberg.com/markets/companies/country/hong-kong/

ここに Phil Bozak から親切に提供されたサンプル コードがあります。

Googleスクリプトを使用してhtmlからテーブルを取得する

この Web サイトのテーブルを取得します。

http://www.airchina.com.cn/www/en/html/index/ir/traffic/

Phil のコードからわかるように、コードには多くの「getElement()」があります。中国国際航空のウェブサイトの HTML コードを見てみると、4回ネストされているように見えますか？だから.getElementの文字列?

ブルームバーグ ページのソース コードを見ると、「div」が読み込まれています...

問題は、このブルームバーグのページからテーブルを取得する方法を教えてもらえますか?

理論の簡単な説明も役に立ちます。本当にありがとう。

4

1 に答える 1

6

質問をひっくり返して、理論から始めましょう。方法論という言葉の方が適しているかもしれません。

構造化されたページで特定の何かを取得したい。これを行うには、要素に直接ザッピングする方法が必要です (これは、アクセスできる独自の方法でラベル付けされている場合に実行できます)、または、多かれ少なかれ手動で構造をナビゲートする必要があります。ページのソースを確認する方法は既に知っているので、この手順についてはよく知っています。これは Firefox Inspector のスクリーンショットで、関心のある要素が強調表示されています。

スクリーンショット - Firefox インスペクター

テーブルにつながる要素の階層を確認できます: html、body、div、div、div.ticker、table.ticker_data。ソースも見ることができます：

<table class="ticker_data">

きちんとした！ラベル付きです！残念ながら、スクリプトで HTML を処理すると、そのクラス情報が削除されます。残念。id="ticker_data"代わりに、この回答の getElementByVal() ユーティリティを使用してそれに到達し、将来のページの再構築から免れることができます。その中にピンを入れてください - 私たちはそれに戻ります.

デバッガーでこれを視覚化すると役立ちます。そのためのユーティリティ スクリプトを次に示します。これをデバッグ モードで実行すると、HTML ドキュメントがレイアウトされて探索できるようになります。

/**
 * Debug-run this in the editor to be able to explore the structure of web pages.
 *
 * Set target to the page you're interested in.
 */
function pageExplorer() {
  var target = "http://www.bloomberg.com/markets/companies/country/hong-kong/";
  var pageTxt = UrlFetchApp.fetch(target).getContentText();
  var pageDoc = Xml.parse(pageTxt,true);
  debugger;  // Pause in debugger - explore pageDoc
}

これは、デバッガーでページがどのように見えるかです。

スクリーンショット - デバッガー

ソースに表示されないため、番号付きの要素が何であるか疑問に思うかもしれません。XML ドキュメント内の同じレベルに複数の要素タイプがある場合、パーサーはそれらを番号付きの配列として表示し0..nます。したがって、デバッガー0で a の下を見ると、そのレベルの HTML ソースに複数のタグがあり、それらに配列としてアクセスできることがわかります (例: ) 。div<div>.div[0]

わかりました、私たちの背後にある理論です。先に進み、力ずくでテーブルにアクセスする方法を見てみましょう。

デバッガーに表示される div 配列を含む階層を知っていれば、Phil の以前の回答のように、これを行うことができます。ドキュメントの構造を説明するために、いくつかの奇妙なインデントを行います。

...
var target = "http://www.bloomberg.com/markets/companies/country/hong-kong/";
var pageTxt = UrlFetchApp.fetch(target).getContentText();
var pageDoc = Xml.parse(pageTxt,true);
var table = pageDoc.getElement()
             .getElement("body")
               .getElements("div")[0]      // 0-th div under body, shown in debugger
                 .getElements("div")[5]    // 5-th div under there
                   .getElement("div")      // another div
                     .getElement("table"); // finally, our table

これらすべての呼び出しのはるかにコンパクトな代替手段として、.getElement()ドット表記を使用してナビゲートできます。

var table = pageDoc.getElement().body.div[0].div[5].div.table;

そして、それはそれです。

固定観念に戻りましょう。デバッガーでは、要素にさまざまな属性が関連付けられていることがわかります。特に、その div[5] には、テーブルを含む div を含む「id」があります。ソースには「クラス」属性がありましたが、ここまで来ていないことに注意してください。

スクリーンショット - デバッガー 2

それでも、親切なプログラマーがこの「id」を配置したという事実は、getDivById()以前の質問から、これを行うことができることを意味します。

var contentDiv = getDivById( pageDoc.getElement().body, 'content' );
var table = contentDiv.div.table;

彼らが物事を動かしたとしても、コードを変更しなくても、そのテーブルを見つけることができるかもしれません。

table 要素を取得したら、何をすべきかはすでにわかっているので、ここで完了です。

于 2013-05-31T15:16:27.347 に答える