在网页抓取过程中，针对动态加载的css类名（如javascript运行时添加的类）进行定位常常会导致抓取失败。本文将深入探讨为何`jquery-tablesorter`这类类名无法直接用于`beautifulsoup`抓取，解释其背后的原理，并提供使用`requests`和`beautifulsoup`进行可靠网页抓取的实用解决方案与最佳实践，帮助开发者有效应对类似问题。
理解动态CSS类名与静态HTML内容
在使用requests库获取网页内容并结合BeautifulSoup进行解析时，我们获取到的是服务器返回的原始HTML文档。然而，现代网页普遍使用JavaScript来增强用户体验，这包括动态修改DOM结构、添加或移除元素、以及为现有元素添加或修改CSS类名。
jquery-tablesorter就是一个典型的例子。当页面首次加载时，表格可能只拥有wikitable sortable这样的静态类名。jquery-tablesorter这个类名通常是由页面上的JavaScript代码在DOM完全加载并执行后，通过jQuery库动态添加到表格元素上的，目的是启用表格的排序功能。
这意味着，当我们使用requests.get()获取页面内容时，我们得到的是JavaScript执行前的“快照”。在这个原始HTML快照中，jquery-tablesorter这个类名尚未被添加。因此，如果尝试使用BeautifulSoup去查找带有wikitable sortable jquery-tablesorter完整类名的元素，自然会因为该类名在原始HTML中不存在而失败。而只使用wikitable sortable则能够成功，因为它在原始HTML中是真实存在的。
使用BeautifulSoup抓取静态HTML中的表格
要解决这类问题，关键在于识别并使用在原始HTML中就存在的静态类名或属性。以下是一个使用requests和BeautifulSoup抓取维基百科页面中目标表格的示例：
立即学习“前端免费学习笔记（深入）”；
import requests
from bs4 import BeautifulSoup as bs
# 目标网页链接
link = 'https://en.wikipedia.org/wiki/List_of_largest_companies_in_the_United_States_by_revenue'
try:
# 发送HTTP GET请求获取页面内容
req = requests.get(link)
req.raise_for_status() # 检查请求是否成功
# 使用html5lib解析器解析HTML内容
# html5lib是一个健壮的HTML解析器，能够处理不规范的HTML
soup = bs(req.content, 'html5lib')
# 查找所有class为'wikitable sortable'的table元素
# 注意这里只使用了原始HTML中存在的类名
tables = soup.findAll('table', attrs={'class': 'wikitable sortable'})
# 检查是否找到了表格
if tables:
# 通常，目标表格是页面上的第一个此类表格，所以我们选择索引0
target_table = tables[0]
print("成功抓取到目标表格的HTML内容：\n")
print(target_table.prettify()) # prettify() 方法可以美化输出HTML
else:
print("未找到指定class的表格。请检查类名或页面结构。")
except requests.exceptions.RequestException as e:
print(f"请求失败：{e}")
except Exception as e:
print(f"处理页面时发生错误：{e}")
代码解析：
- import requests 和 from bs4 import BeautifulSoup as bs: 导入所需的库。
- link = '...': 定义目标URL。
- req = requests.get(link): 发送GET请求获取网页的原始HTML内容。
- req.raise_for_status(): 这是一个好习惯，用于检查HTTP请求是否成功（状态码200）。如果不是，它会抛出一个HTTPError。
- soup = bs(req.content, 'html5lib'): 使用BeautifulSoup和html5lib解析器解析获取到的HTML内容。html5lib解析器对不规范的HTML有更好的容错性。
-
tables = soup.findAll('table', attrs={'class': 'wikitable sortable'}): 这是核心部分。我们使用findAll方法查找所有
标签，并指定其class属性为wikitable sortable。这里只使用了原始HTML中存在的静态类名。
- target_table = tables[0]: 根据页面结构，目标表格通常是查找到的第一个（索引为0）符合条件的表格。
网页抓取最佳实践
为了更有效地应对各类网页抓取挑战，特别是涉及动态内容的场景，以下是一些建议的最佳实践：
-
区分“查看页面源代码”与“开发者工具”：
- 查看页面源代码 (Ctrl+U / Command+Option+U)：这显示的是浏览器从服务器接收到的原始HTML。这是requests库获取到的内容。
- 开发者工具 (F12)：在“Elements”或“检查”选项卡中，你看到的是经过JavaScript修改后的实时DOM结构。如果某个元素或类名只在开发者工具中可见，但在页面源代码中找不到，那么它很可能是由JavaScript动态添加的。
- 最佳实践：在用requests和BeautifulSoup抓取时，始终以“查看页面源代码”为准来确定选择器。
-
优先使用静态、稳定的选择器：
- ID属性：如果元素有唯一的id属性，这是最可靠的选择器。
- 静态CSS类名：选择那些在页面源代码中就存在的类名。避免选择看起来像由JavaScript框架（如React、Vue、Angular）或库（如jQuery UI、tablesorter）动态生成的、带有随机字符或特定功能指示的类名。
- 标签名结合属性：例如，soup.find('div', {'data-id': 'some_value'})。
-
处理JavaScript渲染的内容：
- 如果目标数据完全依赖于JavaScript执行后才能加载（例如，通过AJAX请求数据并渲染到页面上），那么requests和BeautifulSoup可能无法直接获取到。
-
解决方案：
- 查找API接口：检查浏览器开发者工具的“Network”选项卡，看是否有AJAX请求直接返回了所需的数据（通常是JSON或XML格式）。直接请求这些API接口通常更高效、稳定。
- 使用无头浏览器：对于复杂的JavaScript渲染页面，Selenium、Playwright或Puppeteer等工具可以模拟浏览器行为，执行JavaScript并获取渲染后的DOM。
-
增加代码的健壮性：
- 错误处理：使用try-except块捕获requests请求失败、BeautifulSoup查找不到元素等异常。
- 检查元素是否存在：在访问列表或字典元素之前，先判断它们是否为空或键是否存在，避免IndexError或KeyError。例如，if tables: target_table = tables[0]。
- 日志记录：记录抓取过程中的重要信息和错误，便于调试和监控。
-
遵守robots.txt协议和网站使用条款：
- 在进行网页抓取之前，务必检查网站根目录下的robots.txt文件，了解网站对爬虫的限制。
- 阅读网站的服务条款，确保你的抓取行为合法合规。
- 避免对网站造成过大负载，设置合理的请求间隔。
总结
在网页抓取中，理解网页内容的生成机制至关重要。requests和BeautifulSoup主要用于处理静态HTML内容。当遇到像jquery-tablesorter这样由JavaScript动态添加的类名时，应回溯到原始HTML，寻找那些在页面加载之初就存在的稳定选择器。通过结合“查看页面源代码”和开发者工具进行分析，并遵循上述最佳实践，可以显著提高网页抓取的成功率和代码的健壮性。对于纯粹由JavaScript渲染的数据，则需要考虑使用无头浏览器或直接调用其后端API接口。
