

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

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

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

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

[code]

    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]
[/code]


CC BY-SA 4.0
2022-05-12T15:14:06.550
88789
2022-05-13T01:32:25.290
2022-05-12T16:21:22.270
3060
52589
question
javascript
fetchで複数のページにアクセスし、アクセスした各ページからquerySelectorで要素を取得、その取得した要素を配列にしたい


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

[code]

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

このHTMLの構成としては

[code]

    <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を取りたい
    
[/code]

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

[code]

    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);
    
[/code]

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


CC BY-SA 4.0
2022-05-13T01:32:25.290
88795
2022-05-13T01:32:25.290
22665
88789
answer