javascript - 如何解析 DOM (REACT)

Question

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

我对这一切知之甚少，但做了一些研究后，我认为这与 DOM 而不是源代码有关。我需要一种能够获得此 DOM 代码的方法，因为原始源不包含我想要的任何内容，但我不知道从哪里开始(即使在这里阅读了很多答案)。

Here是我要抓取的页面的一个示例。例如，要抓取描述，我想抓取标签之间的内容:

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

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

我对各位天才的问题是，我怎样才能获取这个 DOM 代码并开始抓取我真正想要的元素？

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

非常感谢您!

Answer 1

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

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

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

让我们从一个简单的 ReactJS example 开始:

我们想要抓取“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，您只需下载 the official 2.0 package .

对于 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

您可能还想从 bin/bootstrap.js 文件中注释掉打印 Warning PhantomJS v2.0 ... 的行。