爬蟲(chóng)如何正確從網(wǎng)頁(yè)中提取偽元素？

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

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

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

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

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

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

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

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

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

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

首先我們來(lá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，我們需要使用模擬瀏覽器，無(wú)論是 Selenium 還是 Puppeteer 都可以。這里以 Selenium 為例。

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

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

參考資料