今ご覧いただいているteratailのページを例にお伝えさせていただきます。
ページ下部(「回答する」ボタンの下)の「関連した質問」の各質問のリンク先にfetchでアクセス
質問ぺージの要素(ページのタイトル)をquerySelectorで取得
取得した要素を配列にしたい
記述したコードは以下の通りです。
配列に格納することができず、ご教示いただきたいです。
js
1let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd"); // 「関連した質問」の各aタグを取得 2let questionPageURLarray = []; // 取得したaタグのhrefを格納する用の空配列を作成 3let questionPageHTMLtitleArray = []; // この後fetchでアクセスするページから取得する要素を格納する空配列を作成 4for (let i = 0; i < questionPageURL.length; i++) { 5 questionPageURLarray[i] = questionPageURL[i].getAttribute("href"); // 取得したaタグからhrefを取得し、ループでquestionPageURLの数だけそれを配列に格納 6 fetch(questionPageURLarray[i]) // fetchで「関連した質問」の各リンク先にアクセス 7 .then((response) => response.text()) 8 .then((text) => { 9 let DOMtext = new DOMParser(); 10 let questionPageHTML = DOMtext.parseFromString(text, "text/html"); 11 let questionPageHTMLtitle = questionPageHTML.querySelector(".questionHeader_title__pUEK0"); // 「関連した質問」のリンク先ページのタイトルを取得 12 questionPageHTMLtitleArray[i] = questionPageHTMLtitle; // 取得したリンク先のタイトルを配列に格納 13 }); 14} 15console.log(questionPageHTMLtitleArray); 16// 結果 [] 17 18// 期待する結果 [h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0]
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/05/12 15:42
2022/05/12 16:26