javascriptでhtml中から抜き出したい要素が、うまく取得できない

■概要

お世話になります。
javascriptで気象庁サイトにスクレイピングさせてもらって、最新気象情報を取得するプログラムを書いています。で、node.js環境で実行します。

現状、取得したい要素がうまく取れておらず、どのように書けば良いのか、わからなくなってしまっております。

また、DOM要素がちゃんと取れているかの確認などを、console出力などで確認できておらず、方法ご存知の方いらっしゃれば、ご教示のほど、よろしくお願いいたします。

■書いているプログラム

こちらの記事を参考に、
現状、以下プログラムを書いています。

JavaScript
1const fetch = require('node-fetch');
2const jsdom = require('jsdom');
3const { JSDOM } = jsdom;
4
5(async () => {
6    const res = await fetch('https://www.jma.go.jp/bosai/amedas/#area_type=offices&area_code=130000&amdno=44116');
7    const html = await res.text();
8    //console.log(html); …ここでstring型のhtml情報が取得できていることは、確認済みです
9
10    const dom = new JSDOM(html);
11    //…DOM ツリーに変換。console出力による正しいデータかどうかの確認は、よくできていません。。…色々調べてやってみても、[object Object]のような出力しかできない。
12
13    const document = dom.window.document;
14    var nodes = document.querySelectorAll('body #amedas-content #amd-table');
15
16    console.log("###" + nodes + "," + nodes.length);
17    //『[object NodeList],1』　と出力。中身のチェックはできていないが、Length:1なので、正しく取れているもの、と推測しています。。
18
19※以下省略・・・
20})();

■取得対象のデータについて

以下スクショにおける、赤枠が取得対象のテーブルタグになります。

紫棒は、

document.querySelectorAll('body #amedas-content #amd-table')

にて指定している、取得対象の要素に至るまでの要素を示します。…bodyタグ、id名2つ。
最後のconsole出力確認にて、nodes.lengthが1のため、
id='amd-table'の要素までは、取得できている認識でおります。

■困っていること①

id='amd-table'の要素以降が、うまく取得できていません。

例えば、取得selectorを1つ(「.contents-block」)追加し、以下のようなコードにした場合、

document.querySelectorAll('body #amedas-content #amd-table .contents-block');

末尾console出力でのnodes.lengthは0になってしまいます。
当該要素、ないし、それより深い階層の要素を取得するにあたり、どのようにして書けば良いでしょうか。

■困っていること②

console出力をし、道中のInput/Outputが正しいか確認しつつ進めています。ググってみて以下試したのですが、
いずれもうまくできず、[object NodeList]のような型情報しか出せませんでした。。

・console.log(util.inspect(value));
・console.log(JSON.stringify(document,null,10));

これ以外に、DOM/document要素の中身を確認できる方法、ご存知ありませんでしょうか。

また、

    var nodes = document.querySelectorAll('body #amedas-content #amd-table');

は、documentがドキュメント型ですが、
nodesはオブジェクト型になります。このオブジェクト型変数をドキュメント型(ないしそれに類するもの)に変換できたら、また少し違うやり方もあり得るかな、と思っているのですが、
それは可能でしょうか。。

以上、長々とすみません。。
少しでもご指摘やアドバイスなど頂けますと幸いです。
よろしくお願い致します。

hoshi-takanori

2021/08/24 23:15

同じデータが得られるかは知りませんが、API があるようなので、それで済むならそっちを使ったほうが良いかと。 https://anko.education/apps/weather_api

行動規範の内容に同意します

回答2件

そういうサイトのクローラー作ってスクレイピングするときは、セレニウム使うとええで。
セレニウムの本家サイトは、コレや。
あ。すんまへん、間違うてしもた。
こっちやったわ。

投稿2021/08/24 14:45

退会済みユーザー

総合スコア0

ブラウザで普通にHTMLを見てみれば分かると思いますが、指定しているページはJavaScriptで動的に組み上げています。HTMLを取得しただけではデータの取得はできません。

質問にあるソースは単にHTMLを取得してきているだけのように見えます。
ページのJavaScriptを動作させなければ、取得しようとしている<div id="amd-table"></div>の中身は空っぽなので、取れるはずがありません。

投稿2021/08/24 14:28

ishina_yum

総合スコア509

wwwww

2021/08/24 15:58

早速のご回答、ありがとうございます！ >普通にHTMLを見てみれば分かると思いますが、画面上の操作に伴ってコンテンツが変わることを確認すれば良い、という話と理解しています（相違あればご指摘くださると幸いです）クラウアントサイドレンダリング時の挙動は意識したことがなかったので、その点踏まえて考えてみます。重ね重ね、ありがとうございます。