在处理动态网页内容时，“查看页面源代码”仅显示服务器初始发送的html，不包含javascript渲染后的内容，而“审查元素”则展示了浏览器实时构建的完整dom。因此，若需通过python脚本访问此类动态生成的内容，必须采用selenium或playwright等浏览器自动化工具模拟用户行为，或分析网页请求寻找潜在的api接口，以获取javascript加载后的数据。
动态网页内容解析：'查看页面源代码'与'审查元素'的本质区别
在进行网页数据抓取时，开发者经常会遇到一个困惑：为什么在Google Chrome等浏览器的“审查元素”（Inspect）功能中能看到某个HTML区块的内容，而在“查看页面源代码”（View page source）中却无法找到？这两种查看方式的本质区别在于它们所展示的页面状态。
“查看页面源代码”：此功能显示的是服务器最初发送给浏览器的原始HTML文档。它是一个静态快照，不包含任何由客户端JavaScript执行后对DOM（文档对象模型）进行的修改。如果网页内容是通过JavaScript在浏览器端动态加载或生成的，那么这些内容就不会出现在原始源代码中。
“审查元素”：此功能展示的是浏览器当前渲染的、实时的DOM结构。这意味着它不仅包含了原始HTML，还包含了所有由JavaScript执行后对页面进行的添加、修改或删除。例如，许多现代网站会使用Ajax请求从后端获取数据，然后通过JavaScript将这些数据插入到HTML中，这些动态生成的内容只会在“审查元素”中可见。
因此，当你看到<apec-offres></apec-offres>这样的自定义标签或其内部内容只在“审查元素”中可见时，通常意味着这些内容是由页面上的JavaScript脚本动态加载和渲染的。
立即学习“Python免费学习笔记（深入）”；
Python脚本访问动态内容的策略
由于Python的requests库等传统HTTP客户端只能获取到服务器返回的原始HTML，无法执行JavaScript，因此它们无法直接抓取到动态生成的内容。要访问这些内容，我们需要采取以下策略：
1. 使用浏览器自动化工具
Selenium和Playwright是强大的浏览器自动化工具，它们可以驱动真实的浏览器（如Chrome、Firefox）来加载网页、执行JavaScript，并模拟用户与页面的交互。通过这些工具，我们可以等待页面完全加载并渲染出动态内容后，再提取所需数据。
使用Selenium的示例代码：
首先，确保你已安装Selenium库和对应浏览器的WebDriver（例如ChromeDriver）。
pip install selenium # 下载 ChromeDriver: https://chromedriver.chromium.org/downloads # 将 ChromeDriver 放到系统PATH中或指定其路径
然后，可以使用以下Python脚本来抓取动态内容：
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
# 指定 ChromeDriver 的路径（如果不在系统PATH中）
# service = webdriver.ChromeService(executable_path='/path/to/chromedriver')
# driver = webdriver.Chrome(service=service)
# 初始化 Chrome 浏览器（默认会在系统PATH中查找 ChromeDriver）
# 可以选择以无头模式运行，不显示浏览器界面，提高效率
options = webdriver.ChromeOptions()
options.add_argument('--headless') # 启用无头模式
options.add_argument('--disable-gpu') # 禁用GPU加速，在无头模式下通常需要
options.add_argument('--no-sandbox') # 解决一些Linux环境下的沙箱问题
options.add_argument('--disable-dev-shm-usage') # 解决/dev/shm空间不足问题
driver = webdriver.Chrome(options=options)
try:
url = "https://www.apec.fr/candidat/recherche-emploi.html/emploi?motsCles=photoshop&typesContrat=101888&salaireMinimum=72&salaireMaximum=200&page=0"
driver.get(url)
# 等待页面加载完成或特定元素出现
# 这里以等待 class 为 'job-offers-list' 的元素出现为例
# 你需要根据实际网页结构调整等待条件
WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.CLASS_NAME, "job-offers-list"))
)
# 获取包含动态内容的整个 body 元素的 HTML
# 或者更精确地查找目标元素
dynamic_content_html = driver.page_source
# 如果目标是特定的 <apec-offres> 标签内容
# 可以通过 CSS 选择器或 XPath 来查找
apec_offres_element = driver.find_element(By.TAG_NAME, "apec-offres")
if apec_offres_element:
print("找到 <apec-offres> 元素。其内部HTML：")
print(apec_offres_element.get_attribute("outerHTML"))
else:
print("未找到 <apec-offres> 元素。")
# 进一步解析提取到的HTML内容，例如使用BeautifulSoup
from bs4 import BeautifulSoup
soup = BeautifulSoup(dynamic_content_html, 'html.parser')
# 示例：查找所有职位列表项
job_items = soup.find_all('div', class_='job-item') # 假设职位列表项的class是'job-item'
for job in job_items:
title = job.find('h2', class_='job-title').text.strip() # 假设标题在h2标签内
company = job.find('span', class_='company-name').text.strip() # 假设公司名在span标签内
print(f"职位: {title}, 公司: {company}")
except Exception as e:
print(f"发生错误: {e}")
finally:
driver.quit() # 关闭浏览器2. 分析网络请求（API抓取）
在某些情况下，动态内容是通过JavaScript向后端API发送请求并获取JSON或XML数据后渲染的。这种方法通常比浏览器自动化更高效、更稳定。
分析步骤：
- 打开目标网页，并打开浏览器的开发者工具（F12）。
- 切换到“网络”（Network）选项卡。
- 刷新页面，或触发加载动态内容的操作（如滚动、点击）。
- 观察网络请求，寻找返回JSON或XML数据的XHR/Fetch请求。这些请求通常包含我们所需的数据。
- 一旦找到API接口，你可以直接使用Python的requests库向该接口发送请求，获取原始数据。
示例（伪代码）：
import requests
import json
# 假设通过开发者工具分析，找到了一个返回职位列表的API接口
api_url = "https://www.apec.fr/api/jobs" # 这是一个假设的URL，你需要实际分析
headers = {
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124124 Safari/537.36",
"Accept": "application/json"
}
params = {
"motsCles": "photoshop",
"typesContrat": "101888",
"salaireMinimum": "72",
"salaireMaximum": "200",
"page": "0"
}
try:
response = requests.get(api_url, headers=headers, params=params)
response.raise_for_status() # 检查HTTP请求是否成功
data = response.json()
# 解析 JSON 数据，提取所需信息
for job in data.get('jobs', []): # 假设JSON中有一个'jobs'列表
print(f"职位: {job.get('title')}, 公司: {job.get('companyName')}")
except requests.exceptions.RequestException as e:
print(f"API请求失败: {e}")
except json.JSONDecodeError:
print("API返回的不是有效的JSON格式。")注意事项与最佳实践
- 遵守网站规则： 在进行网页抓取前，务必查阅网站的robots.txt文件，了解网站是否允许抓取以及允许抓取的范围。尊重网站的使用条款，避免对服务器造成过大负担。
- 设置延迟： 使用Selenium等工具时，加入适当的等待时间（time.sleep()或WebDriverWait）可以模拟人类行为，避免被网站检测为爬虫。
- 异常处理： 编写健壮的代码，处理网络错误、元素未找到等异常情况。
- 无头模式： 在生产环境中，推荐使用浏览器的无头（headless）模式运行Selenium，这样可以节省系统资源，提高抓取效率。
- User-Agent： 在发送请求时，设置合适的User-Agent头，模拟真实浏览器访问，可以减少被反爬机制拦截的风险。
- IP代理： 对于大规模抓取，考虑使用IP代理池来避免IP被封锁。
总结
理解“查看页面源代码”和“审查元素”之间的差异是成功抓取动态网页内容的关键。当内容由JavaScript动态生成时，传统的requests库将无法满足需求。此时，可以利用Selenium或Playwright等浏览器自动化工具模拟真实用户行为，等待页面完全渲染后再提取数据；或者，通过分析网络请求，直接调用网站的后端API来获取数据，这种方法通常更为高效。选择哪种方法取决于网站的复杂性和反爬机制。始终牢记遵守网站的抓取规则，并采取负责任的抓取行为。
