Javascript 如何解析DOM（REACT）

我正试图从网站上搜集数据。该网站使用Facebook的React。因此，我可以使用的源代码与使用Chrome的inspector检查元素时看到的代码完全不同

我对所有这些都知之甚少，但经过一些研究，我认为这与DOM有关，而不是源代码。我需要一种方法来获得这个DOM代码，因为原始源代码中没有我想要的东西，但是我不知道从哪里开始（即使在这里阅读了很多答案）

这是我想刮的一页的例子。例如，为了抓取描述，我想抓取标签之间的内容：

<span class="light-font extended-card-description list-group-item">Example description....</span>

示例说明。。。。

但正如您所见，此元素仅在“检查元素””时出现，而不是在我仅查看页面源代码时出现

在这里，我要问你们天才们的问题是，我怎样才能抓住这个DOM代码并开始抓取我真正想要的元素

请原谅，如果我的术语完全不正确，但正如我所说，这对我来说是一个全新的领域，我已经尽我所能做了研究

---

提前非常感谢

ReactJS与许多其他Javascript库/框架一样，使用客户端代码（Javascript）呈现最终的HTML。这意味着，当您、Jaunt或您的浏览器从服务器获取HTML源代码时，它还不包含用户将看到的最终代码。浏览器需要运行页面中包含的Javascript程序，以便生成您希望抓取的最终内容

这类工作我最喜欢的工具是

它（或者更确切地说是CasperJS使用的PhantomJS工具）是一个无头浏览器，这意味着它是一个Webkit版本（如Chrome或Safari），已经去掉了所有GUI（窗口、按钮、菜单）。剩下的是一个可以从终端或Java程序运行的工具。它不会在屏幕上显示任何窗口，但会获取您要求它访问的网页；运行它们包含的任何Javascript；然后回应你的命令，比如“点击这个链接”、“给我那个文本”、“截图”等等

让我们从一个简单的例子开始：

我们想删除“Hello John”文本，但如果查看纯HTML源代码（Ctrl+U或Alt+Ctrl+U），您将看不到它。另一方面，如果您在浏览器中打开控制台并使用以下选择器，则将获得文本：

> document.querySelector('#helloExample .playgroundPreview').textContent
"Hello John"

下面是一个简单的CasperJS脚本，用于执行相同的操作：

var casper = require("casper").create();

casper.start("http://facebook.github.io/react/index.html", function() {
    this.echo(this.fetchText("#helloExample .playgroundPreview"));
});

casper.run();

您可以将其保存为

hello.js

，并从终端使用

casperjs hello.js

执行它，或者使用等效的Java代码

Runtime.getRuntime（）.exec（…）

这里有一个更好的脚本，可以避免加载图像和第三方资源（如Facebook按钮、Twitter按钮、Google Analytics等），从而将加载时间缩短一半。它还添加了一个

waitForSelector

步骤，这样我们就不会在ReactJS有机会创建文本之前冒险获取文本

var casper = require("casper").create({
    pageSettings: {
        loadImages: false
    }
});

casper.on('resource.requested', function(requestData, request) {
    if (requestData.url.indexOf("http://facebook.github.io/") != 0) {
        request.abort();
    }
});

casper.start("http://facebook.github.io/react/index.html", function() {
    this.waitForSelector("#helloExample .playgroundPreview", function() {
        this.echo(this.fetchText("#helloExample .playgroundPreview"));
    });
});

casper.run();

如何安装CasperJS

我在使用旧版本的PhantomJS和CasperJS刮取ReactJS和其他现代Javascript页面时遇到一些问题，因此我建议从GitHub安装PhantomJS 2.0和最新的CasperJS

对于PhantomJS，您只需下载即可

对于CasperJS，由于它是一个Python脚本，您应该能够从GitHub检查最新的提交，并将

bin/CasperJS

链接到您的路径上。以下是Linux或Mac OS X的脚本：

> git clone git://github.com/n1k0/casperjs.git
> cd casperjs
> ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs

---

您可能还想从您的

bin/bootstrap.js

文件中注释掉打印

警告PhantomJS v2.0…

。

Jaunt的网站说它是“不需要Javascript支持时的理想工具”。如果您正在检查的元素不在源代码中，那么它们很可能是由Javascript动态创建的。我猜Jaunt是个错误的工具。谢谢@ultranaut。但是，当我尝试使用我提供的链接创建HtmlPage对象时，我遇到了一个巨大的错误，您是否有使用HtmlUnit来帮助我的经验？您也可以使用HTMLUnitDriver尝试selenium。感谢所有这些！