javascript - CasperJS中如何遍历网站的dom树并获取所有元素？

Question

我是Web开发新手，任务是找到网页上的所有元素(例如，这里我想找到亚马逊上的所有元素，包括页眉、页脚、导航栏等)，然后获取它们的位置和大小。(包括高度、宽度、顶部、底部、左侧、右侧等)我尝试使用CasperJS和PhantomJS来做到这一点，这是我的代码:

casper.start('http://www.amazon.com/s?url=search-alias=aps&field-keywords=watches', function(){
});

var objarr = [];

casper.then(function(){
  var tmp = this.evaluate(function() {
    return document.getElementsByTagName("html")[0]; //get the html and traverse all it children
  }
  traverseDOMTree(tmp);

  for (var i = 0; i < objarr.length; i++){
        var isvalid = judge(objarr[i]); //judge whether the elemnet is null.
        console.log(i+1);
        if (isvalid && i != 0) {
          console.log(objarr[i].textContent);
        }
  }
});

function traverseDOMTree(root) //traverse function
{
  if (root)
  {
    for (var i = 0; i < root.childNodes.length; i++){
        objarr.push(root.childNodes[i]);
        traverseDOMTree(root.childNodes[i]);
    }
  }
}

function judge(obj){ 
  if (obj == null) { 
    console.log("The object is NULL");
    return false;
  }
  //If it is not null, get its location and height with width
  console.log("___________________________");
  console.log("The offsetTop is ", obj.offsetTop);
  console.log("The offsetLeft is ", obj.offsetLeft);
  console.log("The height is", obj.clientHeight);
  console.log("The width is", obj.clientWidth);
}

所以我的方法是首先获取 DOM 树的根，即 document.getElementsByTagId("html")[0]。然后我遍历它的所有子元素并将找到的所有元素放入一个数组中。但是，这里存在几个问题:

1. 我发现的大多数元素都是 null 对象。
2. 遍历功能似乎只在同一层起作用，不会继续遍历。
3. CasperJS 似乎工作不稳定，因为每次尝试运行时都会遇到不同的问题/警告。

我调试了很长时间，尝试了不同的方法，但仍然无法成功。我想我需要将我的遍历函数放入 casper.evaluate() 中，但是关于如何在网络上使用它的教程太少了。那么有没有人可以帮助我找到可行的方法来做到这一点？

Answer 1

CasperJS 构建在 PhantomJS 之上，并继承了它的一些缺点，例如两个不同的上下文。您只能通过沙盒 casper.evaluate() 函数访问 DOM(页面上下文)。它不能使用外部定义的变量，并且您传入或传出的所有内容都必须是原语。 DOM 节点不是基元。请参阅文档 (page.evaluate()):

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 节点。完成遍历后，您可以将结果传递出页面上下文。

或者您可以简单地移动页面上下文中的所有内容并注册到“remote.message”事件:

casper.on("remote.message", function(msg){
    this.echo("remote> " + msg);
});

casper.then(function(){
    this.evaluate(function() {
        var tmp = document.getElementsByTagName("html")[0]; //get the html and traverse all it children
        var objarr = [];

        traverseDOMTree(tmp);

        for (var i = 0; i < objarr.length; i++){
            var isvalid = judge(objarr[i]); //judge whether the elemnet is null.
            console.log(i+1);
            if (isvalid && i != 0) {
              console.log(objarr[i].textContent);
            }
        }

        function traverseDOMTree(root) //traverse function
        {
            if (root)
            {
                for (var i = 0; i < root.childNodes.length; i++){
                    objarr.push(root.childNodes[i]);
                    traverseDOMTree(root.childNodes[i]);
                }
            }
        }

        function judge(obj){ 
            if (obj == null) { 
                console.log("The object is NULL");
                return false;
            }
            //If it is not null, get its location and height with width
            console.log("___________________________");
            console.log("The offsetTop is ", obj.offsetTop);
            console.log("The offsetLeft is ", obj.offsetLeft);
            console.log("The height is", obj.clientHeight);
            console.log("The width is", obj.clientWidth);
            return true;
        }
    }
});