HTML 中 div 元素上的 Beautiful Soup 循环

Question

我正在尝试使用 Beautiful Soup 从网页中提取一些值（这里不是很聪明..），这些值是来自 Weatherbug 预报的每小时值。在 Chrome 开发者模式下，我可以看到这些值嵌套在div类中，如下面的片段所示：在 Python 中，我可以尝试模仿 Web 浏览器并找到这些值：import requestsimport bs4 as BeautifulSoupimport pandas as pdfrom bs4 import BeautifulSoupurl = 'https://www.weatherbug.com/weather-forecast/hourly/san-francisco-ca-94103'header = {  "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36",  "X-Requested-With": "XMLHttpRequest"}page = requests.get(url, headers=header)soup = BeautifulSoup(page.text, 'html.parser')通过下面的代码，我可以找到 12 个这样的hour-card_mobile_conddiv 类，这似乎是正确的，因为在搜索每小时预测时，我可以看到未来数据的 12 小时/变量。我不确定为什么我要选择移动设备方法来查看...（？）temp_containers = soup.find_all('div', class_ = 'hour-card__mobile__cond')print(type(temp_containers))print(len(temp_containers))输出：<class 'bs4.element.ResultSet'>12如果我尝试编写一些代码来循环遍历所有这些 div 类以进一步深入，我会在下面做一些不正确的事情。我可以返回 12 个空列表。有人能给我一些可以改进的提示吗？最终，我希望将所有 12 个未来每小时预测值放入 pandas 数据框中。for div in temp_containers:    a = div.find_all('div', class_ = 'temp ng-binding')    print(a)编辑，基于 pandas 数据框答案的完整代码import requestsfrom bs4 import BeautifulSoupimport pandas as pdr = requests.get(    "https://www.weatherbug.com/weather-forecast/hourly/san-francisco-ca-94103")soup = BeautifulSoup(r.text, 'html.parser')stuff = []for item in soup.select("div.hour-card__mobile__cond"):    item = int(item.contents[1].get_text(strip=True)[:-1])    print(item)    stuff.append(item)df = pd.DataFrame(stuff)df.columns = ['temp']

Answer 1

页面加载后，网站就会动态加载JavaScript。所以你可以使用requests-html或selenium.

from selenium import webdriver

from selenium.webdriver.firefox.options import Options

options = Options()

options.add_argument('--headless')

driver = webdriver.Firefox(options=options)

driver.get(

    "https://www.weatherbug.com/weather-forecast/hourly/san-francisco-ca-94103")

data = driver.find_elements_by_css_selector("div.temp.ng-binding")

for item in data:

    print(item.text)

driver.quit()

输出：

51°

52°

53°

54°

53°

53°

52°

51°

51°

50°

50°

49°

根据用户请求更新：

import requests

from bs4 import BeautifulSoup

r = requests.get(

    "https://www.weatherbug.com/weather-forecast/hourly/san-francisco-ca-94103")

soup = BeautifulSoup(r.text, 'html.parser')

for item in soup.select("div.hour-card__mobile__cond"):

    item = int(item.contents[1].get_text(strip=True)[:-1])

    print(item, type(item))

输出：

51 <class 'int'>

52 <class 'int'>

53 <class 'int'>

53 <class 'int'>

53 <class 'int'>

53 <class 'int'>

52 <class 'int'>

51 <class 'int'>

51 <class 'int'>

50 <class 'int'>

50 <class 'int'>

50 <class 'int'>

Answer 2

当您看到 class = "temp ng-binding" 时，这意味着该 div 具有“temp”类和“ng-binding”类，因此查找两者都不起作用。另外，当我运行你的脚本时，临时容器的 html 看起来像这样：

print(temp_containers[0])

<div class="temp">

                    51°

</div>

所以我运行了这个并得到了结果

import requests

import pandas as pd

from bs4 import BeautifulSoup

url = 'https://www.weatherbug.com/weather-forecast/hourly/san-francisco-ca-94103'

header = {

  "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36",

  "X-Requested-With": "XMLHttpRequest"

}

page = requests.get(url, headers=header)

soup = BeautifulSoup(page.text, 'html.parser')

temp_containers = soup.find_all('div', class_ = 'hour-card__mobile__cond')

print(type(temp_containers))

print(len(temp_containers))

for div in temp_containers:

    a = div.find('div', class_ = 'temp')

    print(a.text)