使用BeautifulSoup爬取网页时HTML元素缺失、div#root为空问题求助

你遇到的是典型的客户端渲染单页应用（SPA）爬取问题：GOAT这类站点的核心内容不会在首次HTML请求时直接返回，初始HTML里<div id="root"></div>只是占位容器，页面实际内容需要浏览器加载执行完配套的JS代码后，才会动态填充到root标签内。而requests库只能拿到初始静态HTML，不会执行JS，因此拿到的root标签为空。

你可以选择以下两种方案中的任意一种解决问题：

• 方案1：使用无头浏览器模拟真实浏览器运行环境，自动执行页面JS获取渲染完成的页面内容。
  这里给你基于Selenium的修改示例代码：

  from bs4 import BeautifulSoup
  from selenium import webdriver
  from selenium.webdriver.chrome.options import Options
  import time
  
  def findShoeNames():
      # 配置无头Chrome
      chrome_options = Options()
      chrome_options.add_argument("--headless=new")
      # 模拟普通浏览器的UA，避免被反爬拦截
      chrome_options.add_argument("user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36")
      
      driver = webdriver.Chrome(options=chrome_options)
      driver.get('https://www.goat.com/sneakers/brand/air-jordan')
      # 等待页面JS加载渲染完成，可根据实际网速调整等待时长
      time.sleep(3)
      
      soup = BeautifulSoup(driver.page_source, 'lxml')
      print(soup.find(id="root"))
      driver.quit()
  
  if __name__ == "__main__":
      findShoeNames()
  

  使用前需要先安装依赖：pip install selenium beautifulsoup4，同时保证你的Chrome浏览器和对应版本的ChromeDriver已配置好。

• 方案2：直接抓取站点数据接口
  打开浏览器开发者工具的「网络」面板，筛选「Fetch/XHR」请求，刷新页面后就能找到站点用来加载球鞋数据的后端接口，这类接口一般返回JSON格式数据，你可以直接用requests请求该接口拿到结构化的球鞋信息，效率比解析HTML更高。
  请求接口时注意在headers里带上和浏览器一致的User-Agent、Referer等参数，避免被站点反爬策略拦截。

内容的提问来源于stack exchange，提问作者Adam Norton