如何解析DOM(REACT)

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文件中注释掉行打印.