Posted at

Chrome DeveloperToolだけでできるお手軽スクレイピング


 先に答え

https://www.minkou.jp/university/ranking/deviation/c=2/ct=2

から大学名だけ取出したいときには、こういうJavaScriptをChrome DeveloperToolのコンソールにペースト

var list = $$('.rankMod-schoolList-detail-name a')

list.map(x=>x.innerText).join("\n")

画面上ではこういう感じ

SS 2018-10-12 13.33.05.png


解説

// $$関数で、CSSセレクタを指定すると、要素が配列で返って来ます

var list = $$('.rankMod-schoolList-detail-name a')
// 帰ってきた配列の各値はノードなので、テキストに置き換えた配列にします
// テキストの配列に変換されたら、それを改行でJOINします
list.map(x=>x.innerText).join("\n")


別の方法

$$と似たメソッドにquerySelectorAllもあります。ほとんど同じ機能なのですが、$$が配列を返すのに対して、querySelectorAllはNodeListを返します。NodeListが曲者で、配列ではないため、mapが使えません。一度配列に変換するという一手間を入れるのが面倒なので、今回は$$を使いました。