XMLHttpRequestでブラウザ表示内容と一致するデータを取得するには？

Question

javascriptで、あるWebページの表示データを取得したく、XMLHttpRequestを使っているのですが、期待通りの結果を得られません。

具体的なソースは以下です。

var url = "https://amaten.com/exhibitions/amazon";
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "document";
request.send("");
request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) {
    var target = request.response.getElementById("contents_list").innerText;
    console.log(target);
  }
}

Webページ"https://amaten.com/exhibitions/amazon"に表示されているリストデータ(ID="contents_list")を取得したいのですが、ブラウザの開発ツールで上記コードを実行すると、ブラウザでの表示内容と全く異なるデータがコンソールに出力されます。

また、上記コードのif文の中で5秒待機する処理を追加することを試しましたが、結果は変わりませんでした。

当該Webページをブラウザでしばらく眺めていると、自動で更新されていることが気になりますが、期待通りの結果を得られないことと関係あるでしょうか。

実行環境は、macOS Mojava、Firefox80.0.1です。

Seleniumなどでブラウザを操作することなく、XMLHttpRequestやfetchAPIでブラウザに表示されているデータを取得する方法をご存知の方、ぜひ教えてください。

Answer 1

XMLHttpRequest()を駆使して取得できるのは、
あくまでhttpレスポンスに含まれる内容だけです。

通常webブラウザは、htmlソースを受信した後、
そこに含まれるスタイルシートやjavascriptを解読して反映しようとします。
javascriptによって当初のhttpレスポンスに含まれないコンテンツが組み込まれているのではないでしょうか。

ちゃんとやるなら、webブラウザのエンジンを操ってやるしかないんでしょうけど、
jsでのみは聞いたことがありません。

例えばこういう事例があります。
Python + Selenium + ChromeでWebスクレイピングをやってみる - Qiita

Comments

[dam9806]

回答、ありがとうございます。
動的サイトのデータをjavascriptで取得するのは困難なので、別の方法を検討します。

Answer 2

静的ページなら簡単ですが、動的なページになると複雑だということです

Answer 3

で、どうするかといったらかなり複雑な処理が必要になってくるのではないでしょうか
サイトのデータベースの元となるファイルに直接つないでそこから引っ張ってくるとか

Answer 4

ブラウザのソースに出力されていないから取得できないんでは？
取得元サイトがJavaScriptで結果を出力してる場合、実行後の結果ではなく、
単純にスクリプトの記述前のデータしか取れないかと思うのですが？

Comments

[退会済みユーザー]

回答は再編集できるので、複数に分けずに一つにまとめてしまったほうが伝わりやすいのではないかと。

[dam9806]

回答、ありがとうございます。
動的サイトのデータをjavascriptで取得するのは困難なので、別の方法を検討します。