Chapter 18 HTML Parser

本章已經介紹了如何讀取XLSX、CSV、JSON檔等常見的開放資料，也可以讀取來自各種網站的資料，例如104、信義房屋、Dcard、facebook、Google Map API、Flickr API、Twitter Rest API等等。但是有些網站不是以資料檔案的方式提供資料，而是直接由伺服器端傳回整個網頁，例如PTT網頁版、不動產實價登錄網站、政府標案決標資訊等等。對於這些網頁，我們需要使用HTML剖析器來解析網頁並獲取其中的資料。

大多數網頁都是由多個<div>、<table>或<li>等標籤層層巢套組成，包括導覽元件、廣告、標題、分類等等各種資訊，而我們需要的資料僅佔其中的一小部分，因此必須要撰寫HTML剖析器，找到目標的HTML標籤，將其獲取回來。

這些網站的HTML標籤通常會巢套很多層，甚至會動態更改巢套的階層以防止被爬取。但是如果仔細觀察，就會發現其中有一些規律性，例如新聞搜尋結果通常包括標題、簡要內文、時間和圖片等元素。瀏覽器發出搜尋請求後，伺服器會傳回一個HTML檔案，並且會傳回一些CSS或JavaScript來指示瀏覽器如何視覺化這個HTML檔案。因此，這個HTML和CSS是在傳回你的瀏覽器後視覺化成網頁的模樣，如果看起來有規律性，那就意味著有一套規律性是設計來讓程式知道如何視覺化這些標題或內容，以便使它們看起來具有一定的規則性。這套規則主要由HTML標籤和屬性組成，使我們可以使用CSS選取相同規則的元件，將之視覺化為相同的樣子。

因此，在進行網頁爬蟲時，我們需要了解HTML和CSS，並學習如何使用CSS Selector和XPath這兩種方法選取HTML元素。CSS Selector和XPath是兩種定義路徑的方法，它們可以通過選擇器（selector）定位HTML元素，以便選取一個或多個條件相同的元素。

CSS Selector是CSS中的一個語法，可以根據HTML元素的標籤名稱、屬性、類別、ID等條件選取對應的元素。舉例來說，可以使用以下CSS Selector選取所有標籤名稱為div的元素：div，或選取所有class屬性為test的元素： .test。

XPath則是XML Path Language的縮寫，是一種用於選擇XML文件中元素的語言，同樣可以用於HTML文件的選擇。XPath使用路徑表達式來定位元素，可以根據標籤名稱、屬性、位置等多種條件進行選擇。例如，以下XPath可以選擇所有標籤名稱為div的元素：//div，或選取所有class屬性為test的元素：//*[@class='test']。

掌握CSS Selector和XPath的使用，可以讓我們更加靈活地獲取網頁上的元素，並且能夠解析複雜的HTML結構，提取出需要的資料。

18.1 HTML

HTML檔案的結構大致如下：

  • 首先會有一個檔案類別的宣告<!DOCTYPE html>，用以告訴第三方瀏覽器或應用程式說這是一個HTML5檔案；

  • 再來是成對標籤所組成的巢套結構，下例即有一對<html></html>包著一對<head></head>和一對<body></body>。

  • 另外<!---->包著的內容為註解，瀏覽器或程式遇到該區段的內容會略過不處理。

下圖可用以說明HTML檔案的巢套（一層包一層）結構（圖片來源https://www.w3schools.com/html/html_intro.asp）。

18.2 Detecting Element Path

Chrome DevTools的使用如下：

  1. 打開Chrome瀏覽器，進入要爬取的網站。

  2. 按下F12鍵或「右鍵」點擊網頁上的任意你感興趣的內容並選擇「檢查（Inspector）」來開啟DevTools。

  3. 在DevTools中，選擇「Elements」分頁。Elements分頁用於查看和修改網頁的HTML和CSS，以及網頁中的DOM元素。在Elements分頁中可以看到網頁中所有的HTML標籤和屬性，以及網頁中的DOM樹狀結構。程式寫作者可使用此功能來檢查和修改網頁元素，例如更改元素的文本、樣式或屬性，或者添加、刪除或重新排列元素。Elements分頁還提供了選擇元素和檢查元素屬性的工具，便於快速找到和解決網頁問題。此外，Elements分頁還具有許多有用的功能，例如網頁渲染性能分析、Box-Model、色彩選擇器等，可幫助使用者更好地理解和設計網頁。

  4. 在「Elements」分頁中找到你要查找的元素，例如一個按鈕或一個超連結。你可以輕點一下Elements中的任意元素，然後按「Ctrl/Cmd+F」就可以搜尋在Elements分頁中的內容。例如你感興趣的是網頁上的「下一頁」三個字，那你搜尋「下一頁」就可以找到相對應的元素。或者，你可以在「Elements」分頁開啟的狀況下，用右鍵輕點左側原始網頁中你感興趣的內容或元素，然後再次選擇「檢查（Inspector）」，此時「Elements」分頁就會自動跳到你感興趣的內容或元素。

  5. 在DevTools的選擇元素面板中，右鍵點擊選擇的元素，然後選擇「Copy」>「Copy XPath」或「Copy」>「Copy selector」。

  6. 將複製的XPath或CSS Selector粘貼到您的爬蟲程式中，以查找和提取相應的數據。

18.2.1 XPath

XPath是一種用於定位和選擇XML文檔中元素的語言，也可以應用於HTML文檔。XPath使用路徑表達式來選擇文檔中的節點或節點集，這些路徑表達式可以是絕對的或相對的，可以根據元素名、屬性、節點位置等進行篩選。XPath提供了一種簡單而強大的方式來編寫網頁爬蟲，使得開發者能夠精確地定位需要提取的數據，進而進行數據清洗和分析。

以下是一個XPath的例子：考慮一個HTML文檔，其中有一個表格，表格中包含多個行和列，每一個單元格包含一些數據。如果我們想要提取表格中第一行第一列的數據，可使用//table/tr[1]/td[1]。這個XPath表達式由以下幾個部分組成：

  • //table: 選擇文檔中的所有表格元素。

  • /tr[1]: 選擇表格中的第一行。

  • /td[1]: 選擇第一行中的第一列。

18.2.2 CSS Selector

CSS Selector是一種用於定位和選擇HTML元素的語言，它可以根據元素的屬性、標籤名稱、類名稱等進行篩選和定位。CSS Selector同樣也是網頁爬蟲中經常使用的一種定位方式。和XPath相比，CSS Selector的寫法更加簡潔和直觀，因此在一些簡單的定位場景中，使用CSS Selector可以更加方便和快捷。但是，在一些複雜的定位場景中，XPath可能更加適合，因為它可以根據節點的位置等進行更加精確的篩選。

用CSS Selector如前面XPath的例子來選擇表格中第一行第一列：table tr:first-child td:first-child。這個CSS Selector由以下幾個部分組成：

  • table: 選擇文檔中的所有表格元素。

  • tr:first-child: 選擇表格中的第一行。

  • td:first-child: 選擇第一行中的第一列。