Chrome浏览器 抓取数据

通过浏览器调试工具返回数据

类似于JQuery与原生的语法
选择器使用 双'$' 符号

基本语法：

//获取 class为nav下的 li元素
$$('.nav li');

//获取 class为list下的 li元素
$$('li', $$('.list'))

1.如果存在选择器的嵌套可以是用，类似后代选择的语法

 $$('.子元素类名', $$('.父元素类名')[0])

抓取

$$('.byte-menu-item',$$('.byte-menu')[0]).map((item)=>{ return item.innerText; })

2.多级数据筛选
以豆瓣电影列表为例

$$('#content .indent table').map((item,index)=>{
    return {
        imgsrc:$$('.nbg img',item)[0].src,
        tit:$$('.pl2 a',item)[0].innerText,
        mes:$$('.pl',item)[0].innerText
    }
})

抓取2

3.结构为兄弟关系，通过索引获取子列表

$$('.hero-nav li').map((nav,index)=>{
    return {
        name: nav.innerText,
        lists: $$('li',$$('.hero-list')[index]).map(el=>{
            return {
                name:$$('h3',el)[0].innerHTML,
                avatar:$$('img',el)[0].src
            }
        })
    }
})