如何解析 DOM (REACT)

Question

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

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

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

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

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

我想问你们这些天才的问题是，我如何获取这个 DOM 代码并开始抓取我真正想要的元素？

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

非常感谢您！

Answer 1

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

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

它（或者更确切地说是 CasperJS 使用的 PhantomJS 工具）是一个无头浏览器，这意味着它是一个 Webkit 版本（如 Chrome 或 Safari），已被剥离所有 GUI（windows、按钮、菜单。）剩下的是一个工具，您可以从终端或 Java 程序运行。它不会在屏幕上显示任何 window，但它会获取您要求的网页；运行它们包含的任何 Java 脚本；然后响应您的命令，例如 "click on this link"、"give me that text"、"capture a screenshot" 等。

让我们从一个简单的开始 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 分析等），从而将加载时间缩短一半。它还添加了一个 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 和其他现代 Java 脚本页面时遇到了一些问题，因此我建议安装 PhantomJS 2.0 和来自 GitHub 的最新 CasperJS。

对于 PhantomJS，您只需下载 the official 2.0 package。

对于 CasperJS，因为它是一个 Python 脚本，您应该能够从 GitHub 和 link 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 ... 的行。

如何解析 DOM (REACT)

How to parse DOM (REACT)

html

javascript

node.js

web-scraping

reactjs