如何用HTML获取网页动态值及Python+Selenium操作商店元素？

问题1：如何使用HTML获取网页中实时更新的值？ #

获取网页实时更新的值，前端常用两种方案：

• 监听DOM变化（推荐）：用MutationObserver API监听目标元素的内容变动，一旦有更新就触发回调获取新值，无需轮询。示例代码：

  // 定位目标元素
  const targetElement = document.getElementById('dynamic-value');
  // 配置观察规则，监听子元素变化和文本改动
  const observerConfig = { childList: true, subtree: true };
  // 变化触发的回调
  const updateCallback = (mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        const latestValue = targetElement.textContent.trim();
        console.log('实时更新的值:', latestValue);
        // 这里可以处理值的后续逻辑
      }
    }
  };
  // 创建并启动观察器
  const observer = new MutationObserver(updateCallback);
  observer.observe(targetElement, observerConfig);
  

• 定时轮询检查：用setInterval定时读取元素内容，对比旧值判断是否更新，适合简单场景。示例代码：

  let previousValue = document.getElementById('dynamic-value').textContent.trim();
  // 每秒检查一次
  setInterval(() => {
    const currentValue = document.getElementById('dynamic-value').textContent.trim();
    if (currentValue !== previousValue) {
      console.log('值已更新:', currentValue);
      previousValue = currentValue;
    }
  }, 1000);
  

如果是后端通过WebSocket推送的实时数据，直接接收推送内容即可同步获取最新值，同时更新页面DOM。

问题2：用Python+Selenium获取动态价格并点击商店物品 #

获取动态更新的价格 #

动态上涨的价格，每次重新定位元素就能拿到当前最新值，也可以结合显式等待优化：

1. 定时轮询获取：

   from selenium import webdriver
   from selenium.webdriver.common.by import By
   import time
   
   driver = webdriver.Chrome()
   driver.get("你的作业页面地址")
   
   old_price = None
   while True:
       # 每次重新定位价格元素，确保拿到最新内容
       price_elem = driver.find_element(By.CSS_SELECTOR, ".price") # 替换成实际选择器
       current_price = price_elem.text.strip()
       if current_price != old_price:
           print(f"当前价格：{current_price}")
           old_price = current_price
       time.sleep(1) # 间隔1秒检查一次
   

2. 显式等待价格变化：

   from selenium.webdriver.support.ui import WebDriverWait
   from selenium.webdriver.support import expected_conditions as EC
   
   wait = WebDriverWait(driver, 10)
   old_price = driver.find_element(By.CSS_SELECTOR, ".price").text.strip()
   # 自定义等待条件，直到价格变化
   def price_has_changed(driver):
       current_price = driver.find_element(By.CSS_SELECTOR, ".price").text.strip()
       return current_price != old_price
   # 等待价格更新
   wait.until(price_has_changed)
   # 获取更新后的价格
   new_price = driver.find_element(By.CSS_SELECTOR, ".price").text.strip()
   print(f"更新后价格：{new_price}")
   

点击商店列表中的不同物品 #

定位所有商店物品元素，遍历点击即可，注意处理元素不可见或动态加载的情况：

1. 遍历点击所有物品：

   # 获取所有商店物品元素，替换成实际的CSS选择器/XPath
   shop_items = driver.find_elements(By.CSS_SELECTOR, ".shop-item")
   for item in shop_items:
       # 滚动到元素位置，避免被遮挡
       driver.execute_script("arguments[0].scrollIntoView({block: 'center'});", item)
       item.click()
       # 如果点击后页面跳转或弹出窗口，需等待返回商店页面
       time.sleep(2)
       # 示例：点击返回按钮回到商店（如果需要）
       # driver.find_element(By.ID, "back-to-shop").click()
   

2. 处理动态加载的物品：
   如果商店物品需要滚动加载，先滚动到底部加载全部物品再点击：

   # 滚动加载所有物品
   last_scroll_height = driver.execute_script("return document.body.scrollHeight")
   while True:
       driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
       time.sleep(2)
       new_scroll_height = driver.execute_script("return document.body.scrollHeight")
       if new_scroll_height == last_scroll_height:
           break
       last_scroll_height = new_scroll_height
   # 再遍历点击所有物品
   shop_items = driver.find_elements(By.CSS_SELECTOR, ".shop-item")
   for item in shop_items:
       item.click()
       time.sleep(1)
   

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