稀に、一覧ページとかに表示されてる画像URLを全て取得したいとき、あるよねー！
そんなときは Chrome のデベロッパーツールを使いましょう。
JS pathを取得
Copy JS pathで取得
document.querySelector("#qurireco > article:nth-child(1) > a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img")
こんな感じ。
getAttributeで画像URLが取得できることを確認
Consoleタブに貼り付けて確認してみる。
console.log(document.querySelector("#qurireco > article:nth-child(1) > a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img").getAttribute("src"));
JS pathの規則性を探す
document.querySelector("#qurireco > article:nth-child(1) > a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img")
document.querySelector("#qurireco > article:nth-child(2) > a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img")
document.querySelector("#qurireco > article:nth-child(3) > a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img")
nth-childのカッコ内の数字が違う感じだなー。
ループさせる要素を見つける
上記でみつけた規則性から下記要素をループすれば良さそう。
document.querySelectorAll("#qurireco > article")
念の為件数を確認。
console.log(document.querySelectorAll("#qurireco > article").length);
ループして出力
var elements = document.querySelectorAll("#qurireco > article");
for (var element of elements) {
console.log(element.querySelector("a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img").getAttribute("src"));
}
var elements = document.querySelectorAll("#qurireco > article");
var list = [];
for (var element of elements) {
list.push(element.querySelector("a > div > div._7uaWVw_YSgf_GKoctUM12 > span > img").getAttribute("src"));
}
copy(list.join("\n"));
かんたんですね！
