如何解析DOM（反应）

Question

我正在尝试从网站上抓取数据。该网站使用Facebook的React。因此，我可以使用Jaunt解析的源代码与使用Chrome的检查器检查元素时看到的代码完全不同。

我对这一切知之甚少，但是经过一些研究，我认为这与DOM而不是源代码有关。我需要一种方法来使用此DOM代码，因为原始源不包含任何我想要的内容，但我不知道从哪里开始（即使在这里已经阅读了很多答案）。

这是我要抓取的页面之一的示例。例如，要刮擦描述，我想抓住标签之间的内容：

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

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

我在这里对天才的问题是，我如何才能获取此DOM代码并开始抓取我实际想要的元素？

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

提前非常感谢您！

Answer 1

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

对于这种工作，我最喜欢的工具是 CasperJS

它（或CasperJS使用的PhantomJS工具）是一个无头的浏览器，这意味着它是Webkit的一个版本（如Chrome或Safari），已经剥离了所有GUI（窗口，按钮，菜单）。您可以从终端或Java程序运行。它不会在屏幕上显示任何窗口，但是会提取您要求的网页；运行它们包含的任何Javascript；然后响应您的命令，例如“单击此链接”，“给我该文本”，“捕获屏幕截图”，等等。

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

我们想抓取“ 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，您可以下载官方2.0软件包。

对于CasperJS，由于它是Python脚本，因此您应该能够从GitHub检出最新提交并链接bin/casperjs到PATH。这是Linux或Mac
OS X的脚本：

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

您可能还需要注释掉该行打印Warning PhantomJS v2.0 ...您的bin/bootstrap.js文件。