為什么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};
    });
});