javascript - 如何通过CasperJS从具有特定类的元素中获取href？

Question

我有一个包含以下格式信息的网页:

<p>
    <a class="class1" href="href1">text1</a>
    text2
</p>

<p>
    <a class="class1" href="href2">text1a</a>
    text2a
</p>

使用 CasperJS，我需要获取包含在 class1 元素中的所有信息的数组，格式如下:

href1
text1
text2

href2
text1a
text2a

我尝试过使用此代码:

var casper = require('casper').create();
casper.start('url', function() {
    require('utils').dump(this.getElementsAttribute('div[class="class1"]', 
          'class'));
});
casper.run();

但是，我只得到了“[ ]”作为答案。

谁能帮我找出代码中的错误吗？

Answer 1

div[class="class1"]作为选择器无法工作，因为你没有任何 <div>标记中具有 class1 的元素类(class)。您可以尝试以下方法，但这不会让您走得太远:

this.getElementsAttribute('a.class1', 'href');

在页面上下文中构建对象数组

仅使用 CasperJS 函数来执行此操作很困难并且可能容易出错。通过迭代所有链接并获取您需要的部分来做到这一点要容易得多。

casper.then(function(){
    var info = this.evaluate(function(){
        var links = document.querySelectorAll(".class1");
        // iterate over links and collect stuff
        return Array.prototype.map.call(links, function(link){
            return {
                href: link.href,
                hrefText: link.textContent.trim(),
                afterText: link.parentNode.childNodes[2].textContent.trim()
            };
        });
    });
    require('utils').dump(info);
});

工作原理:

您可以通过查询 class1 的所有元素来获取所有链接。 。由于 querySelectorAll() 的结果不是数组，而是类似数组的NodeList，不能直接使用 .map()就在上面。

每个链接都有一个href属性(property)和textContent属性(property)。链接后面的文字有点棘手。您首先需要获取链接的父级 ( <p> )，然后尝试通过访问 childNodes 来获取链接后的 TextNode。属性。

childNodes[2]可能必须使用 childNodes[1] 来代替，因为第一个 ( childNodes[0] ) 可能是一个包含空格的 TextNode，所以它后面的所有内容都会发生变化。

在页面上下文中构建单个字符串

您还可以迭代它以获得文本表示形式:

casper.then(function(){
    var info = this.evaluate(function(){
        var links = document.querySelectorAll(".class1");
        // iterate over links and collect stuff
        return Array.prototype.map.call(links, function(link){
            return [
                link.href,
                link.textContent.trim(),
                link.parentNode.childNodes[2].textContent.trim()
            ].join('\n');
        }).join('\n\n');
    });
    this.echo(info);
});

工作原理:

JavaScript 数组有 join() function 。它可以使用指定的分隔符连接每个元素。

<小时/>

请记住，页面上下文 ( evaluate() ) 是沙盒的。 documentation说:

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.

Closures, functions, DOM nodes, etc. will not work!