如何让爬虫正确提取伪元素

时光毁灭记忆、已成空白 提交于 2020-12-13 12:42:43
我们来看一个网页,大家想想使用 XPath 怎么抓取。可以看到,在源代码里面没有请抓取我!这段文字。难道这个网页是异步加载?我们现在来看一下网页的请求。

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

我们来看一个网页,大家想想使用 XPath 怎么抓取。

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

可以看到,在源代码里面没有请抓取我!这段文字。难道这个网页是异步加载?我们现在来看一下网页的请求:

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

网页也没有发起任何的Ajax 请求。那么,这段文字是从哪里来的?

我们来看一下这个网页对应的 HTML:

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

整个 HTML 里面,甚至连 JavaScript 都没有。那么这段文字是哪里来的呢?

有点经验的同学,可能会想到看一下这个example.css文件,其内容如下:

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

没错,文字确实在这里面。其中::after,我们称之为伪元素(Pseudo-element)[1]。

对于伪元素里面的文字,应该如何提取呢?当然,你可以使用正则表达式来提取。不过我们今天不准备讲这个。

XPath 没有办法提取伪元素,因为 XPath 只能提取 Dom 树中的内容,但是伪元素是不属于 Dom 树的,因此无法提取。要提取伪元素,需要使用 CSS 选择器。

由于网页的 HTML 与 CSS 是分开的。如果我们使用 requests 或者 Scrapy,只能单独拿到 HTML 和 CSS。单独拿到 HTML 没有任何作用,因为数据根本不在里面。单独拿到 CSS,虽然有数据,但如果不用正则表达式的话,里面的数据拿不出来。所以 BeautifulSoup4的 CSS 选择器也没有什么作用。所以我们需要把 CSS 和 HTML 放到一起来渲染,然后再使用JavaScript 的 CSS 选择器找到需要提取的内容。

首先我们来看一下,为了提取这个伪元素的值,我们需要下面这段Js 代码:

window.getComputedStyle(document.querySelector('.fake_element'),':after').getPropertyValue('content')

其中,ducument.querySelector的第一个参数.fake_element就表示值为fake_element的 class 属性。第二个参数就是伪元素:after。运行效果如下图所示:

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

为了能够运行这段 JavaScript,我们需要使用模拟浏览器,无论是 Selenium 还是 Puppeteer 都可以。这里以 Selenium 为例。

在 Selenium 要执行 Js,需要使用driver.execute_script()方法,代码如下:

如何让爬虫正确提取伪元素如何让爬虫正确提取伪元素

提取出来的内容最外层会包上一对双引号,拿到以后移除外侧的双引号,就是我们在网页上看到的内容了。

本文地址:https://www.linuxprobe.com/spider-pseudo-elements.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!