html div вложение? используя Google fetchurl

Question

Я пытаюсь получить таблицу со следующей веб-страницы

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

У меня есть пример кода, который был любезно предоставлен Филом Бозаком здесь:

захват таблицы из HTML с помощью скрипта Google

который берет таблицу для этого сайта:

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

Как видно из кода Фила, в коде много "getElement()". Если я посмотрю HTML-код для веб-сайта Air China. Похоже, он вложен четыре раза? вот почему строка.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() из этого ответа, чтобы получить его, и дать себе некоторый иммунитет от будущей реструктуризации страницы. Вставьте булавку в это - мы вернемся к этому.

Это может помочь визуализировать это в отладчике. Вот вспомогательный скрипт для этого - запустите его в режиме отладки, и ваш 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 в отладчике, это говорит нам о том, что есть несколько <div> теги в источнике HTML на этом уровне, и мы можем получить к ним доступ, например, к массиву .div[0],

Хорошо, теория позади, давайте продолжим и посмотрим, как мы можем получить доступ к столу с помощью грубой силы.

Зная иерархию, в том числе массивы div, показанные в отладчике, мы могли бы сделать это, предыдущий ответ аля Фила. Я сделаю некоторые странные отступы, чтобы проиллюстрировать структуру документа:

...
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, содержащий таблицу. Помните, в источнике мы видели атрибуты "class", но обратите внимание, что они не делают это так далеко.

Тем не менее, тот факт, что любезный программист установил этот "идентификатор", означает, что мы можем сделать это, с getDivById() из этого предыдущего вопроса:

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

Если они что-то переместят, мы все равно сможем найти эту таблицу, не меняя наш код.

Вы уже знаете, что делать, когда у вас есть элемент таблицы, так что мы здесь!