瀏覽器內的爬蟲初體驗

新手體驗定位抓取資料的10分鐘小練習:在瀏覽器控制台貼上JavaScript語法。


文章溝通對象

先前分享過給非程式背景朋友的認識網路爬蟲:解放複製貼上的時間,以及實作教學Python爬蟲新手筆記

而在這兩者之間,想必有讀者是搜尋到爬蟲相關文章,但是電腦沒有安裝Python,也沒有額外的時間或動力從頭學起,只想要稍微感受運用程式碼爬取資料大概是怎麼樣的感覺?

沒問題!

我會簡單說明定位元素的概念,並讓結果顯示在瀏覽器內:請把它想成是「對特定網頁內的資料做篩選整理」。練習不用額外安裝任何軟體,直接用Chrome瀏覽器就可以跟著操作,過程大約10分鐘。

以下是Python爬蟲新手筆記的瀏覽器實作簡化版,為了文章完整性,前半部分說明會重疊。


爬蟲眼中的世界

我們透過瀏覽器所看到的網頁呈現,跟爬蟲所看到的並不同,他們看的是網頁原始碼。

舉個例子,就像我們走進便利超商,拿起架上的三明治,我們會看到肉片、蔬菜以及吐司,非常直觀地出現在眼前;但是爬蟲看得比較像是標籤上的說明,例如鈉含量、卡路里等等抽象純文字的說明。

打開任一網頁,按右鍵,選擇檢查網頁原始碼,再想想我剛剛的舉例,有個印象即可。

範例是我之前練習網頁的虛構內容Perfect Match。除了首頁的可愛貓咪外,其他按鈕不會出現任何反應:


範例:辦公室的下午茶

現在我們已經知道怎麼讀取網頁原始碼,接著就是跟爬蟲說我們需要的元素是哪個。

請想像你身為辦公室的手搖杯飲料訂購對外窗口。

下午三點半,眼前正擺著剛送來的20杯手搖飲料,因為劇情需要,你想著這20杯飲料,不就像網頁上的20筆資料嗎?而每杯飲料上的標籤,例如去冰、半糖、微糖,正如資料上所貼的分類標籤class

但因為字實在太小了,為了節省大家拿取的時間,你決定用筆在飲料上寫下每個人的名字id,啊,這杯是老闆的、這杯是Pala的…。

好的,從以上的例子我們可以知道分類標籤class是可以重複出現的,就像很多杯飲料都會出現半糖;而id是唯一的,可以是名字、或是其他方便識別的內容。


要如何觀察定位元素呢?

請在辦公室的下午茶網頁上點右鍵,選擇檢查,點觀察器後指定元素:


我們可以看到網頁原始碼如下:

接著運用所看到的classid元素來練習。


瀏覽器的神秘角落

操作完觀察元素的步驟,畫面會停留在Elements

如果視窗出現的位置跟畫面上不同,可以點開綠色箭頭的三個點,在Dock side調整。


現在我們選擇紅色箭頭處的Console,下面會出現互動介面,請略過錯誤訊息,準備在藍色箭頭處輸入JavaScript語法進行後續練習。

如果要關掉這個彈出的視窗,請選擇Console同排最右方的叉叉即可。


Class選擇器

請在互動介面複製貼上這段JavaScript程式碼,按Enter執行觀察結果。

var result = document.getElementsByClassName('去冰');

for (var i = 0; i < result.length; i++) {
  console.log(result[i].innerText);
}

請留意第一行的getElementsByClassName,表示我們現在要透過class選擇。除了去冰,還可以改成半糖無糖綠茶紅茶等名稱,快速篩選資訊。


如果要統計有幾杯加珍珠,使用.length語法:

var result = document.getElementsByClassName('珍珠');
console.log(result.length);

短片中我先確定有2杯加珍珠,接著列出是哪兩位同事。


Id選擇器

class會重複出現,像是去冰,但是id只會有一個。

使用getElementById透過id選擇,複製貼上程式碼,按Enter執行。

console.log(document.getElementById('老闆').innerText);


進階挑戰

現在我已經把觀察元素和定位抓取資料的方法教給你囉!

程式碼看不懂沒有關係,只要把中文部分替換成對應的名稱就可以,最後我們來做個小小挑戰,把Affinity Photo教程裡的課程名稱全部列出來。


右鍵,檢查元素,指向課程名稱並點擊:


觀察到class名稱有兩個,分別是u-mt-24u-text-zeta,選擇其中一個套入前面提到的程式碼:

var result = document.getElementsByClassName('u-text-zeta');

for (var i = 0; i < result.length; i++) {
  console.log(result[i].innerText);
}

散落在網頁內的資訊,整整齊齊地列出來!

上述兩個連續步驟也可以參考我在臉書放的20秒操作短片


快速計算數量:

var result = document.getElementsByClassName('u-text-zeta');
console.log(result.length);

統計完畢!


當初發現可以這樣快速整理資訊,實在有種難以言喻的悸動。

雖然只是小小的起頭,但希望這篇練習帶來的成就感,能讓新手朋友們多了些具體想像與學習的動機,許多事情透過程式處理,真的可以省下很多很多時間的!

Pala

於電商公司擔任Research Analyst,紀錄過去兩年下班自學簡報設計Python網頁設計AppGoogle Analytics分享;也推薦從架站、撰文到運營,首年12萬瀏覽的部落格心得。最近嘗試靠櫃試香水乾燥花裝飾,學習了牛仔褲布邊布小知識,每天都很充實。