Получите дочерние элементы в casper.each

Question

Используя CasperJS 1.1 со следующими кодами, я могу извлечь полезный HTML-код DOM с веб-страницы.

casper.each(c.getElementsInfo(xpath), function(casper, element, j) { 
    var html = element["html"].trim(); 
    if(html.indexOf('Phone') > -1) { 
     // what should I put here? 
    } 
}); 

Однако, я хочу, чтобы получить доступ & получить дочерние элементы элемента. Как я могу это достичь? HTML-источник Элемента (a.k.a значения html) выглядит следующим образом:

Loop 1

<div class="fields"> 
       Phone 
      </div> 
      <div class="values"> 
       <a href="tel: 12345678">12345678</a> (Mr. Lee)    </div> 

Цикл 2

<div class="fields"> 
       Emergency Phone 
      </div> 
      <div class="values"> 
       <a href="tel: 23456789 (Emergency)">23456789 (Emergency)</a> 
      </div> 

петля 3

<div class="fields"> 
       Opening Hours 
      </div> 
      <div class="values"> 
       9:00am-6:30pm(Weekday)/
       Close on Sundays and Public Holidays（Can be booked）(Holiday) 
      </div> 

Loop 4

<div class="fields"> 
       Last Update 
      </div> 
      <div class="values"> 
       11/06/14    </div> 

выше HTML плохо отформатирован и содержит много пробелов.

Данные, которые я хотел бы принести это:

• Телефон: 12345678
• Emergency Телефон: 23456789 (Emergency)
• Часы работы: 9:00 am-6:30pm (Будни)/Close на По воскресеньям и в праздничные дни (можно заказать) (праздник)
• Последнее обновление: 11/06/14

Пробовал RegEx, но RegEx является слишком сложным.

Answer 1

Я не рекомендую делать это с помощью регулярных выражений. Его можно легко сделать с помощью некоторых селекторов, но это необходимо сделать в контексте страницы (внутри обратного вызова evaluate()), поскольку узлы DOM не могут быть переданы наружу.

CasperJS предоставляет вспомогательную функцию для сопоставления узлов DOM с помощью XPath с __utils__.getElementsByXPath() через модуль ClientUtils, который всегда вставлен автоматически. Результатом этой функции является массив, поэтому применяется нормальный шаблон forEach(). Узлы DOM могут использоваться как узлы контекста для выбора дочерних элементов с el.querySelector(".class").

var info = casper.evaluate(function(xpath){ 
    var obj = {}; 
    __utils__.getElementsByXPath(xpath).forEach(function(el){ 
     obj[el.querySelector(".fields").textContent.trim()] = 
      el.querySelector(".values").textContent.trim(); 
    }); 
    return obj; 
}, yourXPathString); 

Если вы хотите, чтобы выбрать элементы, основанные на селекторе CSS используйте следующее:

var info = casper.evaluate(function(cssSelector){ 
    var obj = {}; 
    __utils__.findAll(cssSelector).forEach(function(el){ 
     obj[el.querySelector(".fields").textContent.trim()] = 
      el.querySelector(".values").textContent.trim(); 
    }); 
    return obj; 
}, yourCssSelector);