javascript - CasperJS querySelectorAll + map.call

Question

html文件

<table id="tbl_proxy_list">
...........
 <tr>
   ......
    <td align="left">
        <time class="icon icon-check">1 min</time>
    </td>
    <td align="left">
        <div class="progress-bar" data-value="75" title="4625"></div>
    </td>
</tr>
</table>

ip.js文件

casper.start('http://www.proxynova.com/proxy-server-list/', function() {
    var info_text = this.evaluate(function() {
        var nodes = document.querySelectorAll('table[id="tbl_proxy_list"] tr');
        return [].map.call(nodes, function(node) { 
            //return node.innerText;
            return node;
        });
    });

    var tr_data = info_text.map(function(str) {
        var elements = str;
        var data = {
            ip        : elements,
            port      : elements[1],
            lastcheck : elements[2],
            speed     : elements[3], // <== value is 75..
        };
        return data;
    });

    utils.dump(tr_data);
});

casper.run();

return node.innerText 只是文本。

• ip 是一个文本值
• port 是一个文本值
• lastcheck 是一个文本值
• speed 不是文本值 (data-value="75")

我想导入data-value="75"(速度值为75)。

我不知道该怎么办

========================================

它的工作..很好。谢谢 Artjom。

但是 tr_data 回显错误。

首先，你的代码修改..

return {
    "ip":        tr.children[0].innerText.trim(),
    "port":      tr.children[1].innerText.trim(),
    "lastcheck": tr.children[2].innerText.trim(),
    "speed":     tr.children[3].children[0].getAttribute("data-value")
};

并回显..

//this.echo(tr_data.length);
for(var ii=0; ii<tr_data.length; ii++)
{
    this.echo(tr_data[ii]['ip']);
}

运行时报错..

TypeError: 'null' 不是一个对象(评估 'tr_data.length')；有什么问题？

我需要你的帮助..谢谢。

Answer 1

您不能从页面上下文传递 DOM 元素(在 evaluate 回调中)。

来自docs :

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

返回一个 DOM 元素数组将导致一个包含许多 undefined 值的数组。这意味着您需要映射页面上下文中的所有内容，然后返回结果数组。您还只需要一个 map。

var tr_data = this.evaluate(function() {
    var nodes = document.querySelectorAll('table[id="tbl_proxy_list"] tbody tr');
    return Array.prototype.map.call(nodes, function(tr, i) { 
        if (tr.children.length != 6) {
            return null; // skip ads
        }
        return {
            ip:        tr.children[0].innerText.trim(),
            port:      tr.children[1].innerText.trim(),
            lastcheck: tr.children[2].innerText.trim(),
            speed:     tr.children[3].children[0].getAttribute("data-value")
        };
    }).filter(function(data){
        return data !== null; // filter the null out
    });;
});

您可能还想 trim 多余的空白区域。