0

今ご覧いただいているスタックオーバーフローの質問ページを例にお伝えさせていただきます。

右サイドバーの「関連する質問」の各質問のリンク先にfetchでアクセス
リンク先の質問ぺージの要素(今回はリンク先の質問ページのタイトル部分)をquerySelectorで取得
取得した要素を配列にしたい

記述したコードは以下の通りです。
こちらのコードをそのままこのページのコンソールに張り付けていただければ
お伝えしたい内容がお伝わりになるかと思います。

配列に格納することができず、ご教示いただきたいです。

let relatedPageURL = document.querySelectorAll(".sidebar-related .js-gps-track");
let relatedPageURLarray = [];
let relatedPageHTMLtitleArray = [];
for (let i = 0; i < relatedPageURL.length; i++) {
  relatedPageURLarray[i] = relatedPageURL[i].getAttribute("href");
  fetch(relatedPageURLarray[i])
    .then((response) => response.text())
    .then((text) => {
      let DOMtext = new DOMParser();
      let relatedPageHTML = DOMtext.parseFromString(text, "text/html");
      let relatedPageHTMLtitle =
        relatedPageHTML.querySelector("#question-header");
      relatedPageHTMLtitleArray[i] = relatedPageHTMLtitle;
    });
}
console.log(relatedPageHTMLtitleArray);

//結果 []

//期待する結果 [div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column, div#question-header.d-flex.sm:fd-column]

1 件の回答 1

0

最初に宣言している部分があっていないです。

let relatedPageURL = document.querySelectorAll(".sidebar-related .js-gps-track");

このHTMLの構成としては

<div class="module sidebar-related">
  <h4 id="h-related">関連する質問</h4>
    <div class="related js-gps-related-questions" data-tracker="rq=1">
      <div class="spacer js-gps-track">←ここのhrefをとっちゃっている
      <a href="https://ja.stackoverflow.com/q/8571?rq=1" title="Question score (upvotes - downvotes)">←ここのhrefを取りたい

となっているので".sidebar-related .js-gps-track"と記述すると<div class="spacer js-gps-track">の属性hrefを取得しています。取得したい要素を正しくquerySelectorAllで取得しなければなりません。単純にaを付けた形で取得できることを試してみたコードです。

let relatedPageURL = document.querySelectorAll(".sidebar-related .js-gps-track a");
let relatedPageURLarray = [];
let relatedPageHTMLtitleArray = [];
console.log(relatedPageURL.length);
for (let i = 0; i < relatedPageURL.length; i++) {
  relatedPageURLarray[i] = relatedPageURL[i].getAttribute("href");
  console.log(relatedPageURLarray[i]);
  fetch(relatedPageURLarray[i])
    .then((response) => response.text())
    .then((text) => {
      let DOMtext = new DOMParser();
      let relatedPageHTML = DOMtext.parseFromString(text, "text/html");
      let relatedPageHTMLtitle =
        relatedPageHTML.querySelector("#question-header");
      relatedPageHTMLtitleArray[i] = relatedPageHTMLtitle;
    });
}
console.log(relatedPageHTMLtitleArray);

また上記のコードには私のデバッグしたconsole.logも入れておきました。
デバッグする際は途中の変数が正しく想定通りの動きをしているのか確認してみましょう。
私の場合はrelatedPageURLarrayにnullが代入されていることを発見して問題の解決に至りました。
デバッグは細かくすればするほど見るのに時間はかかりますが、問題解決に近づきます。
是非試してみてください。

1
  • ご教示ありがとうございます! お伝えいただいた内容を元に引き続き進めてみます!
    – hosax
    2022年5月14日 17:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。