为什么this.evaluate不能正确返回DOM节点？

Question

我正在尝试通过evaluate()方法从网页获取对象，以便可以在evaluate范围之外使用它。 用名称symbol选择的元素是带有148个<options> （=下拉菜单）的<select>标签。

casper.then(function () {
    var elmnt = this.evaluate(function () { return document.getElementsByName("symbol")[0]; });
    console.log(elmnt.options[14].index);
});

//Returns TypeError: 'null' is not an object (evaluating 'elmnt.options[14].index')

casper.then(function () {
    var elmnt = this.evaluate(function () { return document.getElementsByName("symbol")[0].options[14].index; });
    console.log(elmnt);
});

//Returns 14

因此，看起来就像通过evaluate()方法返回对象一样，由于此方法可以正常工作，因此无法完全返回该对象：

casper.then(function () {
    var elmnt = this.evaluate(function () { return document.getElementsByName("symbol")[0]; });
    console.log(elmnt.options.length);
});

//Returns 148

因此，只要不读取数组，就可以访问选项属性。 奇怪吗？

Answer 1

这很有意义，因为最后一个片段中的elmnt.options是一个充满undefined值的数组。 因此，您知道元素的数量，但不知道它们的值。 原因是无法从页面上下文传递DOM节点。 文档说：

注意：参数和评估函数的返回值必须是一个简单的原始对象。 经验法则：如果可以通过JSON序列化，那就很好。

闭包功能，DOM节点等等都不行！

因此，您可以在页面上下文中evaluate所有操作（ evaluate ），或者获得要使用的DOM节点的表示形式。 我认为这不是您想要的。

var elmnt = this.evaluate(function () {
    return [].map.call(document.getElementsByName("symbol")[0].options, function(option){
        return {text: option.innerText, value: option.value};
    });
});