
在处理动态网页内容时,“查看页面源代码”仅显示服务器初始发送的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的requests库等传统HTTP客户端只能获取到服务器返回的原始HTML,无法执行JavaScript,因此它们无法直接抓取到动态生成的内容。要访问这些内容,我们需要采取以下策略:
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() # 关闭浏览器在某些情况下,动态内容是通过JavaScript向后端API发送请求并获取JSON或XML数据后渲染的。这种方法通常比浏览器自动化更高效、更稳定。
分析步骤:
示例(伪代码):
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.124 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格式。")理解“查看页面源代码”和“审查元素”之间的差异是成功抓取动态网页内容的关键。当内容由JavaScript动态生成时,传统的requests库将无法满足需求。此时,可以利用Selenium或Playwright等浏览器自动化工具模拟真实用户行为,等待页面完全渲染后再提取数据;或者,通过分析网络请求,直接调用网站的后端API来获取数据,这种方法通常更为高效。选择哪种方法取决于网站的复杂性和反爬机制。始终牢记遵守网站的抓取规则,并采取负责任的抓取行为。
以上就是理解动态网页内容:‘查看页面源代码’与‘审查元素’的区别及Python抓取策略的详细内容,更多请关注php中文网其它相关文章!
                        
                        每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
                Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号