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

Question

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

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 节点无法从页面上下文传递。 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.

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

因此，要么您在页面上下文中执行所有操作(评估)，要么获得您想要使用的 DOM 节点的表示形式。我认为这不是你想要的。

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