条件を絞り込んだ検索結果におけるcssの指定について

Question

やりたいこと

<h4 class="name" data-name="SSS" style="height: 13px;">SSS</h4> からSSSを抜き出したい。

問題

google chromeの検証からHTMLを追ったが、cssセレクタの挙動が想定と異なる。

HTML例

検索結果を表示するサイトにおいて、デフォルトで全件の名前や付属情報が表示されているので、そこから全件の名前や付属情報を抽出したい。

# HTML
<div id="CY" class="SW">
<div class="LP-RT-AE">
<div class="LP-RT-AE_HR">
<h3 class="LP-RT-AE_HR-text" data-CY="CY_01">コンパクト</h3>
</div><div class="LP-RT-AE_body">
<ul class="LP-RT-list js-tile_container">
<li class="LP-RT-list_item js-tile carname-01_1">
<dl>
<dt>
<img src="images/pc/car_SHUTTLE.png" alt="im" class="image" data-image="">
</dt>
<dd>
<h4 class="ne" data-ne="SSS" style="height: 13px;">SSS</h4>
<h5 class="ct" data-CY="VVV" style="height: 10px;">VVV</h5>
<h6 class="ee" data-ee="OOO<" style="height: 10px;">OOO</h6>
<dl class="price-dl" style="height: 10px;">
<dt>pri</dt>

# コード
url = 'AAAAAAAAAAAAAA'
res = requests.get(url)
content = res.content
soup = BeautifulSoup(content, 'html.parser')
ss = soup.find_all('div', class_='LP-RT-AE')

この時点でssにh4を含む結果が残りません。

ssの出力結果はなにもないです。
1つ階層が上の <div class="LP-RT">で
ss_old = soup.find_all('div', class_='LP-RT')
を行うと出力は以下のようになります。

[<div class="LP-RT">
 <div class="LP-RT-CT">
 <p>
 <span>GU</span>
 <strong class="js-result-count" id="resultCount">0</strong>
 <span>件</span>
 </p>
 </div><!-- .LP-RT-CT -->
 <div id="category">
 <!-- RESULT -->
 </div><!-- #category -->
 </div>]

残りの処理については、

for sss in ss:
    ne = sss.h4
    ct = sss.h4
    ee = sss.h5
    print(ne, ct, ee)

のような感じをイメージしています。

よろしくお願いいたします。

Comments

[namda]

コードは```で囲ってください。
おそらくPythonでの話なのでタグにPythonを追加してください。

Answer 1

質問のコードで問題ないように思えますが、どうでしょうか。

html = '''<div id="CY" class="SW">
<div class="LP-RT-AE">
<div class="LP-RT-AE_HR">
<h3 class="LP-RT-AE_HR-text" data-CY="CY_01">コンパクト</h3>
</div><div class="LP-RT-AE_body">
<ul class="LP-RT-list js-tile_container">
<li class="LP-RT-list_item js-tile carname-01_1">
<dl>
<dt>
<img src="images/pc/car_SHUTTLE.png" alt="im" class="image" data-image="">
</dt>
<dd>
<h4 class="ne" data-ne="SSS" style="height: 13px;">SSS</h4>
<h5 class="ct" data-CY="VVV" style="height: 10px;">VVV</h5>
<h6 class="ee" data-ee="OOO<" style="height: 10px;">OOO</h6>
<dl class="price-dl" style="height: 10px;">
<dt>pri</dt>'''

from bs4 import BeautifulSoup

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

for tag in soup.find_all('div', class_='LP-RT-AE'):
    print(tag.h4)
    print(tag.h5)
    print(tag.h6)
# <h4 class="ne" data-ne="SSS" style="height: 13px;">SSS</h4>
# <h5 class="ct" data-cy="VVV" style="height: 10px;">VVV</h5>
# <h6 class="ee" data-ee="OOO&lt;" style="height: 10px;">OOO</h6>

for tag in soup.find_all('div', class_='LP-RT-AE'):
    print(tag.h4.text)
    print(tag.h5.text)
    print(tag.h6.text)
# SSS
# VVV
# OOO

Comments

[mi2]

ご確認頂きありがとうございます。
上記は確かに実行できています。

実際、スクレイピングしてきた結果からは結果が取れない状況なのですが、
soup.find_all('div', class_='LP-RT-AE')
print(a)
の結果が[]となってしまっているということは、指定しているfind_allの引数が間違っていることですよね？

ssにh4を含む結果が残らず、出力結果が[]となってしまいます。。

[mi2]

ちなみにスクレイピング先はここから拾おうとしています。

[tiitoi]

Javascript で動的に生成された情報なのではないでしょうか。
実際ブラウザでレンダリングしないと現れない要素は、取得できません。
res.content の中身を print() して該当の要素があるかどうかを確認してみてはどうでしょうか。

[mi2]

ありがとうございます。

[tiitoi]

res.content の中に class 属性が 'LP-RT-AE' の div タグが存在することを確認しましたか？
自分が確認したところ無いようですが。

[mi2]

ご丁寧にありがとうございます。
確かにタグはなかったです。

[tiitoi]

```
f = open('sample.html', 'wb')
f.write(res.content)
```

で requests で取得した HTML を保存して、見てみてください。
h4 というタグがそもそもないです。
タグが存在しないので、 Beautiful Soup で取得することは当然できません。

[tiitoi]

先程コメントした通り、Javascript で動的に生成された情報は、ブラウザ以外でアクセスすると存在しないので、取得することはできないです。

[mi2]

別のモジュール等で対応しなければならないということがわかりました。
ご丁寧に対応頂きありがとうございました。

[tiitoi]

HTML の解析は beautiful soup で、HTML の取得は selenium を使ってはどうでしょうか。
selenium はコード上から実際にブラウザを立ち上げて操作を行うことができます。