html嵌套？使用谷歌fetchurl

Question

我正在尝试从以下网页中获取表格

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

我有一些示例代码，由Phil Bozak在这里提供：

grabbing table from html using Google script

抓住了这个网站的表格：

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

从Phil的代码中可以看出，代码中有很多“getElement（）”。如果我看一下国航网站的html代码。看起来它嵌套了四次？这就是为什么字符串.getElement？

现在我查看Bloomberg页面的源代码，并使用“div”加载...

问题是有人可以告诉我如何从Bloomberg页面中获取表格吗？

只是对该理论的简要解释也是有用的。非常感谢。

Answer 1

让我们颠倒你的问题，从理论开始。方法可能是一个更好的词。

您希望获得结构化页面中的特定内容。要做到这一点，你需要一种方法来直接切换元素（如果它以我们可以访问的独特方式标记，可以完成），或者你需要手动或多或少地导航结构。您已经知道如何查看页面的来源，因此您熟悉此步骤。这是Firefox Inspector的屏幕截图，突出显示了我们感兴趣的元素。

我们可以看到通向表格的元素的层次结构：html，body，div，div，div.ticker， table.ticker_data 。我们也可以看到来源：

<table class="ticker_data">

纯！它贴上了标签！不幸的是，当我们在脚本中处理HTML时，类信息会被删除。游民。如果它是id="ticker_data"，我们可以使用getElementByVal() utility from this answer来达到它，并让自己对未来的页面重组有一定的免疫力。放一针 - 我们会回来的。

它可以帮助在调试器中显示它。这是一个实用程序脚本 - 在调试模式下运行它，你将准备好你的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下看到div时，这告诉我们该级别的HTML源代码中有多个<div>标记，我们可以将它们作为数组访问，例如.div[0]。

好的，我们背后的理论，让我们继续看看我们如何通过蛮力访问桌子。

知道层次结构，包括调试器中显示的div数组，我们可以做到这一点，ala 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]上有一个“id”，它包含包含表格的div。请记住，在源代码中我们看到了“类”属性，但请注意它们并没有达到这个目的。

然而，一个善意的程序员把这个“id”放到位的事实意味着我们可以用getDivById()来解决这个问题：

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

如果他们搬家，我们可能仍然可以找到该表，而无需更改我们的代码。

一旦你拥有了table元素，你就已经知道该怎么做了，所以我们在这里完成了！