攝影：產(chǎn)品經(jīng)理家里做點(diǎn)簡(jiǎn)單菜

我們來看一個(gè)網(wǎng)頁(yè)，大家想想使用 XPath 怎么抓取。

可以看到，在源代碼里面沒有請(qǐng)抓取我！這段文字。難道這個(gè)網(wǎng)頁(yè)是異步加載？我們現(xiàn)在來看一下網(wǎng)頁(yè)的請(qǐng)求：

網(wǎng)頁(yè)也沒有發(fā)起任何的Ajax 請(qǐng)求。那么，這段文字是從哪里來的？

我們來看一下這個(gè)網(wǎng)頁(yè)對(duì)應(yīng)的 HTML：

整個(gè) HTML 里面，甚至連 JavaScript 都沒有。那么這段文字是哪里來的呢？

有點(diǎn)經(jīng)驗(yàn)的同學(xué)，可能會(huì)想到看一下這個(gè)example.css文件，其內(nèi)容如下：

沒錯(cuò)，文字確實(shí)在這里面。其中::after，我們稱之為偽元素(Pseudo-element)^[1]。

對(duì)于偽元素里面的文字，應(yīng)該如何提取呢？當(dāng)然，你可以使用正則表達(dá)式來提取。不過我們今天不準(zhǔn)備講這個(gè)。

XPath 沒有辦法提取偽元素，因?yàn)?XPath 只能提取 Dom 樹中的內(nèi)容，但是偽元素是不屬于 Dom 樹的，因此無法提取。要提取偽元素，需要使用 CSS 選擇器。

由于網(wǎng)頁(yè)的 HTML 與 CSS 是分開的。如果我們使用 requests 或者 Scrapy，只能單獨(dú)拿到 HTML 和 CSS。單獨(dú)拿到 HTML 沒有任何作用，因?yàn)閿?shù)據(jù)根本不在里面。單獨(dú)拿到 CSS，雖然有數(shù)據(jù)，但如果不用正則表達(dá)式的話，里面的數(shù)據(jù)拿不出來。所以 BeautifulSoup4的 CSS 選擇器也沒有什么作用。所以我們需要把 CSS 和 HTML 放到一起來渲染，然后再使用JavaScript 的 CSS 選擇器找到需要提取的內(nèi)容。

首先我們來看一下，為了提取這個(gè)偽元素的值，我們需要下面這段Js 代碼：

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

其中，ducument.querySelector的第一個(gè)參數(shù).fake_element就表示值為fake_element的 class 屬性。第二個(gè)參數(shù)就是偽元素:after。運(yùn)行效果如下圖所示：

為了能夠運(yùn)行這段 JavaScript，我們需要使用模擬瀏覽器，無論是 Selenium 還是 Puppeteer 都可以。這里以 Selenium 為例。

在 Selenium 要執(zhí)行 Js，需要使用driver.execute_script()方法，代碼如下：

提取出來的內(nèi)容最外層會(huì)包上一對(duì)雙引號(hào)，拿到以后移除外側(cè)的雙引號(hào)，就是我們?cè)诰W(wǎng)頁(yè)上看到的內(nèi)容了。

參考資料

[1]

偽元素(Pseudo-element): https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

總結(jié)

以上是生活随笔為你收集整理的css提取页面元素唯一性_一日一技：爬虫如何正确从网页中提取伪元素？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。