Firefox HTML源码查看器标签变灰及BeautifulSoup获取动态li标签问题

我来帮你逐一解决这两个问题：

那些灰色的标签其实是页面加载完成后通过JavaScript动态插入到DOM中的元素，Firefox的页面查看器会把服务器最初返回的静态HTML和后续JS生成的动态内容做区分，灰色就是用来标记后者的。

你可以验证一下：按下Ctrl+U查看页面的原始源代码（服务器直接返回的内容），那些灰色标签在里面是找不到的——因为它们不是页面初始结构的一部分，是浏览器执行JS后才创建出来的。

这是因为BeautifulSoup只能解析静态HTML内容，也就是服务器第一次响应给浏览器的页面代码。而你提到的后两个li标签，是用户点击缩略图时通过JavaScript动态生成的，属于动态DOM内容，直接用BeautifulSoup请求页面是抓不到的。

给你两个可行的解决方案：

方案1：用Selenium模拟浏览器交互 #

Selenium可以像真实用户一样操作浏览器，等待页面动态加载完成后再抓取内容。示例代码如下：

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
from bs4 import BeautifulSoup

# 初始化Firefox浏览器
driver = webdriver.Firefox()
driver.get("你的目标页面URL")

# 等待所有缩略图加载完成，然后逐个点击
try:
    # 替换成你页面中缩略图的CSS选择器
    thumbnails = WebDriverWait(driver, 10).until(
        EC.presence_of_all_elements_located((By.CSS_SELECTOR, ".left-thumbnail"))
    )
    for thumb in thumbnails:
        thumb.click()
    
    # 等待最后一个li标签加载完成（这里以itemNo2为例）
    WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, "li.itemNo2"))
    )
    
    # 获取当前页面的完整DOM，交给BeautifulSoup解析
    page_html = driver.page_source
    soup = BeautifulSoup(page_html, "html.parser")
    
    # 抓取所有目标li标签
    target_lis = soup.find_all("li", class_=lambda cls: cls and "image item" in cls)
    for li in target_lis:
        print(li.get("class"))
finally:
    driver.quit()

方案2：直接抓取动态接口数据 #

打开浏览器开发者工具（F12）切换到「网络」标签，然后点击左侧缩略图，观察是否有XHR或Fetch请求返回了生成li标签所需的数据（比如图片信息）。如果能找到这类接口，直接发送HTTP请求获取数据，比模拟点击更高效，也不需要依赖浏览器。

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