js 爬虫抓取网页数据( 这段文字是从哪里来的?文字是怎么抓取的)

　　js 爬虫抓取网页数据(

这段文字是从哪里来的?文字是怎么抓取的)

　　我们来看一个网页，我们来思考一下如何使用 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的类属性。第二个参数是伪元素：after。运行效果如下图所示：

　　为了能够运行此 JavaScript，我们需要使用模拟浏览器，Selenium 或 Puppeteer。这里以 Selenium 为例。

　　要在 Selenium 中执行 Js，需要使用 driver.execute_script() 方法。代码如下：

　　提取内容的最外层会用一对双引号包裹起来。拿到之后，去掉外面的双引号，就是我们在网页上看到的内容。

　　参考

　　[1] 伪元素：