XPath—实用的网页爬取技术

XPath是一种技术，它使用路径表达式来选择XML文档（或者在我们的例子中是HTML文档）中的节点或节点集。即使XPath本身不是一种编程语言，它也允许你写一个表达式，可以直接指向一个特定的HTML元素，甚至是标签属性，而不需要手动遍历任何元素列表。

在我们上一篇关于用Python爬取网页的文章中，我们已经简单地讨论了XPath表达式。现在是时候对这个主题进行更深入的挖掘了。

为什么要学习XPath

• 当从网页中提取数据时，知道如何使用基本的XPath表达式是一项必备的技能。
• 它比CSS选择器更强大（例如，你可以引用父元素）。
• 它允许你在任何方向上导航DOM
• 可以匹配HTML元素内的文本

关于XPath的主题已经写了整整一本书，我现在当然不想声称这篇文章将为这个主题的每一个方面提供全面的指导，它只是对XPath的一个介绍，我们将通过真实的例子看到你如何将它用于你的网络爬取项目。

但首先，让我们谈一谈DOM的情况

文档对象模型（DOM）

我将假设你已经知道HTML，所以这只是一个小小的复习。

正如你已经知道的那样，网页是一个由HTML标签组成的层次结构的文件，它描述了整个页面的布局（即段落、列表）并包含相关的内容（即文本、链接、图像）等等。让我们看看一个基本的HTML页面，以了解什么是文档对象模型。

正如你从图片中注意到的那样（缩进线提供了另一个提示），HTML文档可以被视为一棵树。这正是大多数HTML解析器（即你的网络浏览器）要做的事情，它们会将HTML内容解析成一个内部的树状表示–这就是所谓的DOM，即文档 对象 模型。

下图是Chrome浏览器开发者工具的截图，显示了DOM的文本表述，在我们的例子中，它与我们的HTML代码非常相似。

有一点要记住，虽然在我们的例子中，DOM树与我们的HTML代码非常相似，但不能保证永远如此，DOM树 可能与服务器最初发送的HTML代码 有很大不同。你问这是为什么？我们的好朋友JavaScript。

只要不涉及JavaScript，DOM树就会与服务器发送的内容基本一致，但是如果有了JavaScript，所有的赌注都会取消，DOM树可能已经被它严重操纵了。特别是SPA通常只发送一个基本的HTML骨架，然后由JavaScript来 “丰富 “它的内容。以Twitter为例，每当你滚动到页面底部，一些JavaScript代码就会获取新的推文，并将它们追加到页面上，也就是追加到DOM树上。

现在，我们已经学习了（或者说刷新了）HTML和DOM的基础知识，我们可以深入研究XPath。

XPath语法

首先让我们看一下一些XPath词汇。

• Nodes–有不同类型的节点，根节点、元素节点、属性节点，以及所谓的原子值，这是HTML文档中文本节点的同义词。
• Parents– 包含当前元素的直接元素。每个元素节点都有一个父元素。在我们上面的例子中，html是head和body的父元素，而body是网站实际内容的父元素。
• Children– 当前元素所包含的直接元素。元素结点可以有任何数量的子元素。在我们的例子中，h1和两个p元素都是body的子元素。
• Siblings– 与当前元素处于同一层次的节点。在我们的例子中，head和body是兄弟姐妹（在它们作为html的子女的功能中），h1和两个p元素也是兄弟姐妹（在它们作为body的子女的功能中）。
• Ancestors– 当前元素的所有父元素的列表。
• Descendants– 当前元素的所有子元素（有自己的孩子）的列表。

下面是一个基本语法元素的列表，你将使用它们来组合你的XPath表达式

XPath谓词

XPath也支持谓词，它允许你对你用原始表达式得到的元素列表进行过滤。谓词被添加到你的XPath表达式的方括号中，[mypredicate]。几个谓词的例子是

XPath例子

好了，现在我们已经涵盖了基本的语法，让我们根据之前的例子中的HTML代码来看看几个例子。

浏览器中的XPath

幸运的是，浏览器原生支持XPath，所以只要打开你最喜欢的网站，按F12键进入开发工具，然后切换到Elements/Inspector标签，就可以看到当前页面的DOM树。

现在，只需按下Ctrl/Cmd+F，你就会得到一个DOM搜索字段，你可以在这里输入任何XPath表达式，输入后，你的浏览器就会突出显示下一个匹配项。

开发者工具还提供了一种方便的方法来获取任何DOM元素的XPath表达式。只要右击一个DOM元素并复制XPath。

使用Python的XPath

有很多Python包都支持XPath：

• lxml
• Scrapy
• Selenium

在下面的例子中，我们将在无头模式下使用Selenium和Chrome。

1.电子商务产品数据提取

在这个例子中，我们将加载一个亚马逊页面

并使用几个XPath表达式来选择产品名称、价格和亚马逊图片。

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By

options = Options()
options.headless = True
options.add_argument("--window-size=1920,1200")
driver = webdriver.Chrome(options=options, service=Service(ChromeDriverManager().install()))
driver.get("https://www.amazon.com/Dyson-V10-Allergy-Cordless-Cleaner/dp/B095LD5SWQ/")

title = driver.find_element(by=By.XPATH, value='//span[@id="productTitle"]')
current_price = driver.find_element(by=By.XPATH, value='//div[@id="corePrice_feature_div"]//span[@data-a-color="price"]/span[1]')
image = driver.find_element(by=By.XPATH, value='//div[@id="imgTagWrapperId"]/img')

product_data = {
'title': title.text,
'current_price': current_price.get_attribute('innerHTML'),
'image_url': image.get_attribute('src')
}

print(product_data)
driver.quit()

虽然所有的浏览器设置调用都很吸引人（毕竟我们真的用这些代码运行了一个成熟的浏览器实例），但在本教程中，我们真正想关注的是以下表达。

//span[@id=”productTitle”] //div[@id=”corePrice_feature_div”]//span[@data-a-color=”price”]/span[1] //div[@id=”imgTagWrapperId”]/img
这三个表达式都是相对的（注意是//），这意味着我们是从整个DOM树中选择元素，而不是指定一个完全的绝对路径。每个表达式还使用了一个谓词，根据元素的ID进行过滤。

• 第一个表达式只是选择一个ID为 “productTite “的标签。这应该会给我们产品的名称。
• 第二个表达式选择一个ID为 “corePrice_feature_div “的标签，然后在其子代中搜索一个标签，并使用第一个直接的子代来表示产品价格。
• 最后但并非最不重要的是，图片的URL。在这里，我们搜索一个标签，并选择其直接的子。

def autologin(driver, url, username, password):
# Load the page
driver.get(url)

# Find a password input field and enter the specified password string
password_input = driver.find_element(by=By.XPATH, value="//input[@type='password']")
password_input.send_keys(password)

# Find a visible input field preceding out password field and enter the specified username
username_input = password_input.find_element(by=By.XPATH, value=".//preceding::input[not(@type='hidden')]")
username_input.send_keys(username)

# Find the form element enclosing our password field
form_element = password_input.find_element(by=By.XPATH, value=".//ancestor::form")

# Find the form's submit element and click it
submit_button = form_element.find_element(by=By.XPATH, value=".//*[@type='submit']")
submit_button.click()

return driver

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By

options = Options()
options.headless = True
options.add_argument("--window-size=1920,1200")
driver = webdriver.Chrome(options=options, service=Service(ChromeDriverManager().install()))
driver.get("https://news.ycombinator.com/newest")

articles = []

for i in range(0, 3):
elems = driver.find_elements(by=By.XPATH, value="//a[@class='titlelink'][starts-with(text(), 'Ask HN')]/../..")

for elem in elems:
link = elem.find_element(by=By.XPATH, value=".//a[@class='titlelink']")
articles.append({
"id": elem.get_attribute("id"),
"link": link.get_attribute("href"),
"title": link.text
})

next = driver.find_element(by=By.XPATH, value="//a[@rel='next']")
next.click()

print(articles)

driver.quit()