前端用js在Console手动爬数据

1.本次爬数据的网站是王者荣耀官网的英雄数据
基本结构是

• 英雄分类
• 英雄列表 （英雄名字，英雄头像）

2.html结构

英雄分类和英雄列表的html结构
通过html结构我们可以看到分类名称在hero-nav 盒子的li标签里面

英雄列表在hero-list盒子里面，名称头像在h3标签里，头像src在img标签里

3.代码

$$('.hero-nav > li').map((li,i)=>{  //$$相当于jQuery里面的元素选择器$
//使用数组的方法map来对数组进行处理获得我们需要的数据
 return {
  name:li.innerText,//分类名称
  heros:$$('li',$$('.hero-list')[i]).map(el => {//英雄数组
    return {
      name:$$('h3',el)[0].innerHTML,//英雄名称
      avatar:$$('img',el)[0].src  }//英雄头像
    })
 }
})

4.同JSON. 1.本次爬数据的网站是王者荣耀官网的英雄数据
基本结构是

• 英雄分类
• 英雄列表 （英雄名字，英雄头像）

2.html结构

英雄分类和英雄列表的html结构
通过html结构我们可以看到分类名称在hero-nav 盒子的li标签里面

英雄列表在hero-list盒子里面，名称头像在h3标签里，头像src在img标签里

3.代码

$$('.hero-nav > li').map((li,i)=>{  //$$相当于jQuery里面的元素选择器$
//使用数组的方法map来对数组进行处理获得我们需要的数据
 return {
  name:li.innerText,//分类名称
  heros:$$('li',$$('.hero-list')[i]).map(el => {//英雄数组
    return {
      name:$$('h3',el)[0].innerHTML,//英雄名称
      avatar:$$('img',el)[0].src  }//英雄头像
    })
 }
})

4.同JSON. stringify将结果转化为json数据方便复制
JSON. stringify(上面的代码)

[{“name”:“热门”,“heros”:[{“name”:“后羿”,“avatar”:“https://game.gtimg.cn/images/yxzj/img201606/heroimg/169/169.jpg”},{“name”:“孙悟空”,“avatar”:“https://game.gtimg.cn/images/yxzj/img201606/heroimg/167/167.jpg”},{“name”:“铠”,“avatar”:“https://game.gtimg.cn/images/yxzj/img201606/heroimg/193/193.jpg”},{“name”:"安琪…