理解动态网页内容：‘审查元素’与‘查看页面源代码’的区别及Python爬取策略-js教程-PHP中文网

理解动态网页内容：‘审查元素’与‘查看页面源代码’的区别及Python爬取策略

碧海醫心

发布： 2025-11-03 19:44:46

原创

747人浏览过

理解动态网页内容：'审查元素'与'查看页面源代码'的区别及Python爬取策略

网页中的动态内容，如javascript生成的部分，在浏览器“审查元素”中可见，但在“查看页面源代码”中不可见。这是因为后者仅显示初始html。要通过python脚本获取这类内容，需使用selenium等工具模拟浏览器行为或高级爬虫技术，以捕捉javascript执行后的dom状态。

动态网页内容的工作原理

现代网页通常不仅仅是静态的HTML文档。许多网站为了提供更丰富的用户体验，会大量使用JavaScript来动态加载数据、修改页面结构或响应用户交互。当浏览器接收到服务器发送的初始HTML、CSS和JavaScript文件后，它会开始解析HTML并构建文档对象模型（DOM）。随后，JavaScript代码会执行，根据其逻辑从API获取数据，或直接在客户端生成新的HTML元素，并将其插入到DOM中。这个过程使得网页内容在浏览器中呈现时，可能与最初从服务器获取的HTML代码有所不同。

“审查元素”与“查看页面源代码”的核心差异

理解动态内容的关键在于区分浏览器提供的两种查看页面方式：

“审查元素”（Inspect Element）
- 显示内容： 当你在浏览器中右键点击并选择“审查元素”时，开发者工具会显示当前网页的实时DOM状态。这意味着它不仅包含服务器最初发送的HTML，还包括所有由JavaScript执行后动态添加、修改或删除的元素。你看到的是浏览器渲染引擎在执行完所有脚本后的最终结果。
- 用途： 主要用于前端开发人员调试页面布局、样式和JavaScript行为。
“查看页面源代码”（View Page Source）

立即学习“Python免费学习笔记（深入）”；
- 显示内容： 这个功能会直接显示浏览器从服务器接收到的原始HTML文本。它不执行任何JavaScript，也不渲染CSS。因此，所有由JavaScript在客户端动态生成的内容都不会出现在这里。
- 用途： 主要用于查看网页的初始结构、SEO相关信息，或者在传统静态爬取时获取内容。

因此，当你发现某个元素在“审查元素”中可见，但在“查看页面源代码”中找不到时，这几乎可以肯定该元素是由JavaScript动态生成的。

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

查看详情

Python获取动态内容的策略

传统的Python网络爬虫库，如requests，只能获取服务器返回的原始HTML。对于动态生成的内容，它们无法执行JavaScript来渲染页面。要获取这类内容，我们需要模拟浏览器行为。

1. 使用Selenium模拟浏览器行为

Selenium是一个强大的自动化测试工具，它允许我们通过编程方式控制真实的浏览器（如Chrome、Firefox）。通过Selenium，我们可以让浏览器加载页面、等待JavaScript执行、执行点击操作，然后从渲染后的DOM中提取数据。

基本步骤：

安装Selenium和浏览器驱动： 首先，你需要安装selenium库，并下载与你浏览器版本匹配的驱动程序（例如，Chrome需要chromedriver）。
```
pip install selenium
```
登录后复制

启动浏览器并访问页面： 使用Selenium启动一个浏览器实例，并导航到目标URL。

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 指定chromedriver的路径
# service = Service(executable_path='/path/to/chromedriver') # 根据你的实际路径修改
# driver = webdriver.Chrome(service=service)

# 更简洁的写法，如果chromedriver在系统PATH中或与脚本同目录
driver = webdriver.Chrome()

try:
    url = "https://www.apec.fr/candidat/recherche-emploi.html/emploi?motsCles=photoshop&typesContrat=101888&salaireMinimum=72&salaireMaximum=200&page=0"
    driver.get(url)

    # 等待页面加载完成或特定元素出现
    # 这里的apec-offres是自定义标签，可能需要等待其内部内容加载
    # 我们可以等待一个该标签内的具体元素，或者等待apec-offres标签本身可见
    wait = WebDriverWait(driver, 10) # 最多等待10秒
    # 等待<apec-offres>标签出现并可见
    apec_offres_element = wait.until(
        EC.visibility_of_element_located((By.TAG_NAME, "apec-offres"))
    )

    # 获取<apec-offres>标签的内部HTML
    # 注意：这里获取的是整个元素的innerHTML，可能包含其他嵌套的动态内容
    content = apec_offres_element.get_attribute('innerHTML')
    print("获取到的<apec-offres>内容：")
    print(content[:500]) # 打印前500个字符，避免输出过长

    # 如果需要进一步解析内容，可以使用BeautifulSoup
    from bs4 import BeautifulSoup
    soup = BeautifulSoup(content, 'html.parser')
    # 示例：查找apec-offres内部的职位列表项
    job_titles = soup.find_all('h2', class_='card-title') # 假设职位标题在h2.card-title中
    for title in job_titles:
        print(f"职位标题: {title.text.strip()}")

except Exception as e:
    print(f"发生错误: {e}")
finally:
    driver.quit() # 确保关闭浏览器

登录后复制

2. 其他高级技术

Headless Browsers（无头浏览器）： Selenium也可以配置为使用无头模式（不显示浏览器界面）运行，这在服务器端爬取时非常有用，可以节省资源。
API调用： 有些网站虽然表面上是动态加载，但实际上是通过JavaScript向后端API发送请求获取数据。如果能直接找到并调用这些API，效率会更高。你需要通过浏览器开发者工具的网络（Network）选项卡来观察这些请求。
Pyppeteer： 这是一个Python库，提供了与Google Chrome的DevTools协议的接口，可以更精细地控制无头Chrome浏览器，性能通常优于Selenium。

注意事项与最佳实践

遵守Robots.txt： 在爬取任何网站之前，请务必查看其robots.txt文件（例如：https://www.apec.fr/robots.txt），了解网站的爬取规则。
设置User-Agent： 模拟真实浏览器请求头，避免被网站识别为爬虫并拒绝访问。Selenium通常会自动处理。
处理加载延迟： 动态内容需要时间来加载和渲染。使用WebDriverWait和expected_conditions来智能地等待元素出现，而不是使用硬编码的time.sleep()。
错误处理： 编写健壮的代码，处理网络问题、元素未找到等异常情况。
伦理与法律： 尊重网站的服务条款，不要对服务器造成过大负担。在某些司法管辖区，未经授权的爬取可能涉及法律风险。
资源消耗： Selenium会启动一个完整的浏览器实例，相比requests等库，资源消耗更大。在大规模爬取时需要考虑性能优化。

总结

当“审查元素”显示内容而“查看页面源代码”不显示时，这明确指示了动态内容的生成。对于Python脚本而言，直接使用requests无法获取这些内容。解决方案是利用Selenium等工具模拟浏览器行为，执行JavaScript并等待页面完全渲染，从而获取到完整的、实时的DOM内容。理解这两种查看方式的本质差异，是成功进行动态网页内容爬取的关键。

以上就是理解动态网页内容：‘审查元素’与‘查看页面源代码’的区别及Python爬取策略的详细内容，更多请关注php中文网其它相关文章！