JavaScriptで一覧ページの画像URLを全て取得する

稀に、一覧ページとかに表示されてる画像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"));

かんたんですね！