是否可以提取 div data-app 数据？答案

【问题标题】：Is it possible to extract div data-app data?是否可以提取 div data-app 数据？
【发布时间】：2021-11-03 09:31:22
【问题描述】：

我正在尝试从下拉框中提取数据列表。当我检查 html 源代码时，它嵌套在这个 div 数据应用程序中，如下所示：

<div data-app="true" id="app" class="application application--light"></div>
<div class="card" style="height:auto;" data-ripple="false">
<ul data-uid="669" class="list">
<li><a href="javascript:;" class="list__tile list__tile--link" data-ripple="true" style="position: relative;"><div class="list__tile__content">
<div class="list__tile__title">Car 1</div></div></a></li>
<li><a href="javascript:;" class="list__tile list__tile--link" data-ripple="true"><div class="list__tile__content">
<div class="list__tile__title">Car 2</div></div></a></li>

谁能告诉我如何从 div class="list__tile__title" 中提取“Car 1”和“Car 2”。尝试如下使用 beautifulsoup，但似乎无法提取任何内容。

for title in soup.find_all('div', attrs={'class': 'list__tile__tile'}):
    content_d = title.descendants
    for d in content_d:
        if d.name == 'div' and d.get('class', '') == ['list__tile__title']:
            print(title.text)

这是正确的使用方法吗？

谢谢！

【问题讨论】：

欢迎来到 SO - 请改进您的问题，以便我们重现您的问题。如何创建minimal reproducible example 谢谢（一些代码、url、html 示例会很酷且很有帮助）
请发布 HTML/URL、您的代码以及您对代码的期望
已添加代码和预期输出。谢谢。

标签： python html web-scraping beautifulsoup

【解决方案1】：

是的，您可以使用这些方法从 div 中提取数据

使用纯 JavaScript

document.querySelector("div").dataset.app

使用 jQuery

$("div").data("app");

【讨论】：

对不起，我不知道 JavaScript。可以使用 beautifulsoup 或 selenium 来提取这些数据吗？

【解决方案2】：

您可以通过将标签视为字典来访问标签的属性 - 选择您的元素并调用属性：

soup.select_one('#app')['data-app']

示例

from bs4 import BeautifulSoup as Soup
html='''
<div data-app="true" id="app" class="application application--light">text</div>
'''
soup = Soup(html, features="html.parser")

print(soup.select_one('#app')['data-app'])

输出

true

【讨论】：

感谢您的回复！我想从列表中提取数据 - 用更详细的代码更新了我的帖子。可以进一步提供建议吗？

【解决方案3】：

您的代码中有错字。类名是list__tile__title 而不是list__tile__tile。

这是我如何获得汽车名称的方法。

import requests
from bs4 import BeautifulSoup

s = """
<div data-app="true" id="app" class="application application--light"></div>
<div class="card" style="height:auto;" data-ripple="false">
<ul data-uid="669" class="list">
<li><a href="javascript:;" class="list__tile list__tile--link" data-ripple="true" style="position: relative;"><div class="list__tile__content">
<div class="list__tile__title">Car 1</div></div></a></li>
<li><a href="javascript:;" class="list__tile list__tile--link" data-ripple="true"><div class="list__tile__content">
<div class="list__tile__title">Car 2</div></div></a></li>
"""

soup = BeautifulSoup(s, 'lxml')
for title in soup.find_all('div', attrs={'class': 'list__tile__title'}):
    print(title.text.strip())

Car 1
Car 2

【讨论】：

我的输出还是0。我之前试过类似的方法，但是什么都得不到：(
这意味着该页面中的数据正在由 JavaScript 加载。使用selenium。