「數位時代最有價值的資源不是黃金，而是你能不能找到、整理、再利用資訊。」

在 Day 8 裡，我們已經學會了怎麼用 HTTP Request 節點 把網頁的程式碼（HTML）請回來。

不過問題來了：那一大串 HTML 對我們來說就像一本亂碼的字典，要怎麼從裡面挑出我們想要的「書名」和「網址」呢？

今天，我們就要動手做一個「篩選器」，從龐雜的程式碼裡只抓取有用的資訊，並轉成可以下載的 CSV 檔案。

流程會是：

1. 認識網頁的三大元素：HTML、JavaScript、CSS
2. 學會用瀏覽器的 Inspect Element（檢查元素） 工具，找到書名與網址在哪裡
3. 在 n8n 裡用 Extract HTML Content 節點，抽出這些資訊
4. 把結果轉成檔案下載

1. HTML、JavaScript、CSS 簡介

在開始前，我們要先搞清楚「網頁是怎麼組成的」。

• HTML：像是建築物的骨架，決定「有哪些內容」。例如文字、圖片、連結。
• JavaScript (JS)：像活動助理，讓網頁能動起來（彈跳視窗、倒數計時器）。
• CSS：像設計師，負責顏色、字體、排版，讓頁面更美。

👉 在爬資料的時候，最重要的就是 CSS，因為它能幫我們「指定」到底要抓哪個部分。這個指定方式就叫做 CSS Selector（選擇器）。

2. 瀏覽器的檢查工具

我們回到 https://books.toscrape.com。

在網頁上 右鍵 → Inspect（檢查元素），就會出現一個分割視窗，裡面全是程式碼。

這時候，可以找到一個小按鈕（例如 Chrome 叫「Select element」），點下去，然後把滑鼠移到網頁上的「書名」。

當你點選書名，右邊的程式碼就會自動定位到對應的 HTML。

例如：

書 1：<a href="catalogue/a-light-in-the-attic_1000/index.html" title="A Light in the Attic">A Light in the ...</a>

書 2：<a href="catalogue/tipping-the-velvet_999/index.html" title="Tipping the Velvet">Tipping the Velvet</a>

一般來說，HTML 元素大多是這樣的形式：

<element attribute="Attribute">Text</element>

也就是說，一個元素同時會包含「屬性（attribute）」和「文字內容（Text）」，許多這樣的元素組合起來，就形成整個網頁。

我們觀察這兩個元素，以我們所抓取的網站為例：

• 它們的 attribute「title」 分別是：
  • title="A Light in the Attic"
  • title="Tipping the Velvet"
• 它們的 Text 則是：
  • A Light in the ...
  • Tipping the Velvet

這表示，如果我們想要拿到完整的書名，最佳方式就是去讀取 attribute「title」的值。

同時，我們也可以右鍵複製它的 Selector Path（選擇器路徑），用來定位元素。

例如書 1 與書 2 的 Selector Path：

Slector Path-1：
body > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > h3 > a

Slector Path-2：
body > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(2) > article > h3 > a

雖然完整路徑不同，但最後的相對路徑「article > h3 > a」是一樣的，代表「所有書的標題元素」都符合這個規則。

這就是我們等一下在 n8n 裡要用的 CSS Selector。

3. 在 n8n 裡抽取資料

接下來，回到 n8n。

在上一次的流程裡，我們已經有：

1. Manual Trigger（手動觸發）
2. HTTP Request（請求網頁 HTML）

現在，新增一個節點：

Extract HTML Content

在「Extraction Values」裡輸入：

• Key：自己取名字，例如 Title
• CSS Selector：填入剛才觀察到的 article > h3 > a
• Return Value：選擇 Attribute
• Attribute：輸入 title

執行之後，Output 就會列出書目中每本書的標題！ 🎉

4. 把資料轉成檔案

最後，再新增一個節點：

Convert to File → CSV

執行之後，你會看到 Download 按鈕，點擊就能下載 CSV 檔案。

打開來，就能看到整整齊齊的書名清單。

小結

到這裡，我們已經學會了：

• 用 瀏覽器檢查工具 找到元素與 CSS Selector
• 用 Extract HTML Content 抽出指定資訊
• 用 Convert to File 輸出成 CSV 檔案

不過要注意，這個方法只適合「結構單純」的靜態網頁。

很多現代網站有更複雜的動態載入機制，就需要更進階的技巧。

但這裡有個現實問題

然而，用 Selector 抓資料的方法，看似清楚，卻有幾個挑戰：

1. 需要對 HTML 結構 有一定理解。
2. 很多網站的內容是 動態生成 的，無法直接用這種方式抓取。
3. 網頁爬蟲其實是一個 技術門檻不低 的領域，尤其對於非技術領域的人。

所以我們要換個角度思考：如果門檻太高，不一定要硬著頭皮自己寫程式，善用第三方工具（甚至是無程式碼工具）也是一種很聰明的做法。後面我也會介紹其他更簡單的方法。

小作業

這次我們只提取了書名。

請你嘗試看看：

1. 研究 HTML，找到書目的「網址」與「圖片網址」對應的元素
2. 在 n8n 裡設計新的 Extraction Values，把它們一起抓下來
3. 匯出 CSV，檢查是否正確

交流

我建立了一個行銷技術交流群，專注討論 SEO、行銷自動化等主題，歡迎有興趣的朋友一起加入交流。

掃QR Code 或點擊圖片加入