Beautiful Soup 无法在 html 中找到所有图像标签（正好停在 5 处）答案

【问题标题】：Beautiful Soup can not find all image tags in html (stops exactly at 5)Beautiful Soup 无法在 html 中找到所有图像标签（正好停在 5 处）
【发布时间】：2018-10-05 11:15:33
【问题描述】：

我正在尝试使用 beautifulsoup 来获取具有特定类别的网站的所有图像。我的问题是，当我运行代码只是为了查看我的代码是否可以找到每个图像时，它只会获得图像 1-5。我认为问题在于 html，因为图像 6-end 位于嵌套的 div 中，但 Find_all 应该能够找到具有同一类的所有 img。

import requests, os, bs4, sys, webbrowser

url = 'https://mangapanda.onl/chapter/'
os.makedirs('manga', exist_ok=True)

comic = sys.argv[1:]
aComic = '-'.join(sys.argv[1:])  

issue = input('which issue do you want?')
aIssue = ('/chapter-' + issue)
aComic = (aComic + '_110' +  aIssue) 

comicUrl = (url + aComic)
res = requests.get(comicUrl)
res.raise_for_status()

soup = bs4.BeautifulSoup(res.text, 'html.parser')


comicElem = soup.find_all(class_="PB0mN")  
if comicElem == []:
    print('nothing in the list')
else:
    print('There are ' + str(len(comicElem)) + ' on this page')
    for i in range(len(comicElem)):
        comicPage = comicElem[i].get('src')
        print(str(comicPage) + '\n')

在使用可以帮助我解决这个问题的美丽汤时，我是否遗漏了什么？是导致此问题的html吗？有没有更好的方法我可以自己诊断这个问题，这本来是在我的能力范围内的（旁注：我目前正在阅读“用 Python 自动化无聊的东西”一书。这是我得到这个想法的地方迷你项目和我对python技能水平的一个不错的想法。最后我正在使用BeautifulSoup来了解更多信息。如果可能的话，我想使用BeautifulSoup解决这个问题，如果我需要，我会研究通过html解析的其他选项.

使用 Firefox quantim 59.0.2 使用python3

PS，如果您知道可能已经回答了这个问题的其他问题，请随时将我链接到它。我真的很想通过其他人的问题找出答案，但似乎我的问题非常独特。

【问题讨论】：

你应该看看你的 soup.prettify() 并看看那些其他图像源是否可见。我现在正在查看来自您链接的网站的漫画的来源，似乎只有问题 1 到 5 可见。它们有一个简单的命名方案，因此可以解决。但是你应该先看看你的汤是否能看到图像，如果需要的话，在这里发布soup.prettify()。
为了澄清打印 soup.prettify() 将为您提供您尝试解析的 HTML 的更清晰版本，以便您可以看到正在使用的内容。

标签： python html web-scraping beautifulsoup html-parsing

【解决方案1】：

问题是一些图像在页面加载后通过 Javascript 添加到 DOM。所以

res = requests.get(comicUrl)

在 javascript 进行任何修改之前获取 HTML 和 DOM。这就是为什么

soup = bs4.BeautifulSoup(res.text, 'html.parser')
comicElem = soup.find_all(class_="PB0mN")
len(comicElem) # = 5

只找到 5 张图片。

如果你想获取所有加载的图像，你不能使用 requests 库。下面是一个使用 selenium 的示例：

from selenium import webdriver
browser = webdriver.Chrome('/Users/glenn/Downloads/chromedriver')
comicUrl = "https://mangapanda.onl/chapter/naruto_107/chapter-700.5"
browser.get(comicUrl)
images = browser.find_elements_by_class_name("PB0mN")
for image in images:
    print(image.get_attribute('src'))
len(images) # = 18 images

有关抓取 javascript 页面的其他资源，请参阅此帖子： Web-scraping JavaScript page with Python

关于如何判断 HTML 是否正在使用 javascript 进行修改？

我没有任何硬性规定，但您可以执行以下调查步骤：

正如您观察到的那样，最初仅找到 5 个带有请求的图像，但看到页面上有更多图像是 DOM 在加载后被更改的第一个线索。

第二步：使用浏览器 Developer Tools -> Scripts 你可以看到有几个 javascript 文件与页面相关联。请注意，并非所有 javascript 都会修改 DOM，因此这些脚本的存在并不一定意味着它们正在修改 DOM。

为了进一步验证页面加载后 DOM 正在被修改：

从 Developer Tools -> View Page Source 中复制 html 到一个 HTML 格式化工具，如 http://htmlformatter.com，格式化 html 并查看行数。开发者工具->查看页面源代码是服务器发送的不做任何修改的html。

然后从 Developer Tools -> Elements 复制 html（确保从 <html>...</html> 获取整个内容）并将其复制到 HTML 格式化工具中，例如 http://htmlformatter.com，格式化并查看行数。 Developer Tools -> Elements html 是完整的、修改后的 DOM。

如果行数显着不同，那么您知道 DOM 在加载后正在被修改。

比较“https://mangapanda.onl/chapter/naruto_107/chapter-700.5”的行数显示源 html 有 479 行，完整 DOM 有 3245 行，因此您知道页面加载后正在修改 DOM。

【讨论】：

非常感谢 glenn15。在开始这个项目之前，我曾研究过 selenium，但我读到它不再适用于最新版本的 Firefox，所以我比我应该放弃的早放弃了它。它似乎是一个非常强大的工具，虽然有点慢（或者至少从我读到的似乎是这样）。无论如何，我想我会开始研究更多地使用 selenium，并尝试找到另一种工具来使用 web-scrap javascript firefox。如果你不介意我问，你怎么知道第5页之后添加的html是使用javascript添加的？