今ご覧いただいているteratailのページを例にお伝えさせていただきます。
ページ下部(「回答する」ボタンの下)の「関連した質問」の各質問のリンク先にfetchでアクセス
質問ぺージの要素(ページのタイトル)をquerySelectorで取得
取得した要素を配列にしたい
記述したコードは以下の通りです。
配列に格納することができず、ご教示いただきたいです。
js
let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd"); // 「関連した質問」の各aタグを取得 let questionPageURLarray = []; // 取得したaタグのhrefを格納する用の空配列を作成 let questionPageHTMLtitleArray = []; // この後fetchでアクセスするページから取得する要素を格納する空配列を作成 for (let i = 0; i < questionPageURL.length; i++) { questionPageURLarray[i] = questionPageURL[i].getAttribute("href"); // 取得したaタグからhrefを取得し、ループでquestionPageURLの数だけそれを配列に格納 fetch(questionPageURLarray[i]) // fetchで「関連した質問」の各リンク先にアクセス .then((response) => response.text()) .then((text) => { let DOMtext = new DOMParser(); let questionPageHTML = DOMtext.parseFromString(text, "text/html"); let questionPageHTMLtitle = questionPageHTML.querySelector(".questionHeader_title__pUEK0"); // 「関連した質問」のリンク先ページのタイトルを取得 questionPageHTMLtitleArray[i] = questionPageHTMLtitle; // 取得したリンク先のタイトルを配列に格納 }); } console.log(questionPageHTMLtitleArray); // 結果 [] // 期待する結果 [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]
まだ回答がついていません
会員登録して回答してみよう