网页中的动态内容，如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动态生成的。
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_element = wait.until( EC.visibility_of_element_located((By.TAG_NAME, "apec-offres")) ) # 获取 标签的内部HTML # 注意：这里获取的是整个元素的innerHTML，可能包含其他嵌套的动态内容 content = apec_offres_element.get_attribute('innerHTML') print("获取到的 内容：") 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内容。理解这两种查看方式的本质差异，是成功进行动态网页内容爬取的关键。
