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

我是web开发新手，任务是查找网页上的所有元素（例如，这里我想查找Amazon上的所有元素，包括页眉、页脚、导航栏等），然后获取所有元素的位置和大小（包括高度、宽度、顶部、底部、左侧、右侧等）。我尝试使用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);
}

casper.start（'http://www.amazon.com/s?url=search-别名=aps&字段关键字=watches'，函数（）{
});
var-objarr=[]；
casper.then（函数（）{
var tmp=this.evaluate（函数（）{
return document.getElementsByTagName（“html”）[0]；//获取html并遍历它的所有子项
}
横贯树（tmp）；
对于（变量i=0；i

因此，我的方法是首先获取DOM树的根，即

document.getElementsByTagId（“html”）[0]

。然后遍历它的所有子元素，并将找到的所有元素放入一个数组中。但是，这里有几个问题：

我找到的大多数元素都是空对象

遍历函数似乎只在同一级别上工作，不会继续遍历

CasperJS似乎无法稳定工作，因为每次尝试运行时，我都会遇到不同的问题/警告

---

我已经调试并尝试了很长时间的不同方法，但仍然没有成功。我想我需要将遍历函数放入

casper.evaluate（）中

，但是关于如何在web上使用它的教程太少了。那么有没有人能帮我找到一种可行的方法呢？

这似乎是最简单的方法，我不确定您是否在某种程度上受限于如何使用它，但我只会使用普通javascript：

var allElements = document.getElementsByTagName("*");
var element, index = 0, length = allElements.length;
for ( ; index < length; index++) {
    element = allElements[index];
    // get whatever information you want from the element
}

var-allegements=document.getElementsByTagName（“*”）；
var元素，指数=0，长度=等位基因长度；
对于（；索引<长度；索引++）{
元素=等位基因[指数]；
//从元素中获取所需的任何信息
}

最简单的方法就是使用以下工具获取所有元素：

document.getElementsByTagName("*");

但是如果你想用递归来实现它：

函数遍历（节点、元素）{
如果（节点）{
元素推送（节点）
var childs=node.childNodes；
for（var i=0；iCasperJS构建在PhantomJS之上，继承了它的一些缺点，比如两个不同的上下文。您只能通过沙盒
casper.evaluate（）访问DOM（页面上下文）
函数。它不能使用外部定义的变量，传入或传出的所有内容都必须是基元。DOM节点不是基元。请参阅文档（）：

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

闭包、函数、DOM节点等将不起作用！

这意味着您必须在页面上下文中执行所有操作，因为您直接处理这些DOM节点。当您完成遍历时，您可以将结果从页面上下文中传递出去

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

casper.on（“remote.message”，函数（msg）{
this.echo（“remote>”+msg）；
});
casper.then（函数（）{
这个。evaluate（函数（）{
var tmp=document.getElementsByTagName（“html”）[0]；//获取html并遍历所有子项
var-objarr=[]；
横贯树（tmp）；
对于（变量i=0；i
我不熟悉CasperJS，但也许你可以试试
document.queryselectoral（“*”）
。这不起作用。我从中得到的大多数元素都是空的。你的循环最好还是这样写（可能是index++，但在我看来相当主观。无论哪种方法，都要感谢提示！！=]我以前尝试过，但得到的几乎所有元素都将为空。因此我改变了从中遍历整个dom树的方法
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;
        }
    }
});