I want fetch to access multiple pages, querySelector to retrieve elements from each page I accessed, and array those elements.

Let me give you an example of the stack overflow question page you are looking at now.

Go to fetch for each "Related Questions" question in the right sidebar
Get elements of linked question page (this time the title of linked question page) with querySelector I want to array the elements I got

The code is as follows:
Please attach this code directly to the console of this page
You will hear what you want to say.

I cannot put it in an array, so please let me know.

let relatedPageURL= document.querySelectorAll(".sidebar-related.js-gps-track");
let relatedPageURLarray=[];
let relatedPageHTMLtitleArray=[];
for (leti=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);

// Result [ ]

// Expected results [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-columndiv # ]div #question-header.d-flex.sm:fd-columndiv # <]

javascript

2022-09-30 18:10

1 Answers

The first part of the declaration is not correct.

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

This HTML configuration is

<div class="module sidebar-related">
  <h4id="h-related">Related Questions</h4>
    <div class="related js-gps-related-questions" data-tracker="rq=1">
      <div class="spacer js-gps-track">← I'm taking the href here
      <a href="https://ja.stackoverflow.com/q/8571?rq=1" title="Question score (upvotes-downvotes)">← I want to get this href

If you write ".sidebar-related.js-gps-track", you get the attribute href of <div class="spacer js-gps-track">.The elements you want to retrieve must be retrieved correctly in querySelectorAll.This is the code that I have tried to obtain simply by adding an a.

let relatedPageURL= document.querySelectorAll(".sidebar-related.js-gps-tracka");
let relatedPageURLarray=[];
let relatedPageHTMLtitleArray=[];
console.log (relatedPageURL.length);
for (leti=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);

Also, I have included the console.log that I debugged in the above code.
When debugging, check to see if the variables in the middle are working as expected.
In my case, I found that null has been substituted for the relatedPageURLarray, and I have solved the problem.
The more detailed the debugs are, the more time it takes to see them, but they get closer to solving the problem.
Please give it a try.

2022-09-30 18:10

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656