javascript爬取网页数据

var dd =document.querySelectorAll('#box li')    // 要用All  返回一个数组
// dd 返回下列内容
NodeList(20) [li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li]
// 遍历tittl
for(var dom of dd){
    console.log(dom.querySelector('span').innerText)
}
// 返回结果
多亮 - 剑震江湖
sentry5.6.1.min.js:2 江映蓉 - 依然
sentry5.6.1.min.js:2 Sunnee杨芸晴 - 乘风破浪
sentry5.6.1.min.js:2 周深 - 归处
sentry5.6.1.min.js:2 Billie Eilish、ROSALÍA - Lo Vas A Olvidar
sentry5.6.1.min.js:2 By2 - 大红包
sentry5.6.1.min.js:2 萨顶顶 - 海底
sentry5.6.1.min.js:2 Ty.、AnsrJ、Dj Chronic - 新西部爱情
sentry5.6.1.min.js:2 刘若英 - 黄金年代
sentry5.6.1.min.js:2 张杰 - 像一道光
sentry5.6.1.min.js:2 吴琼 - 醉清欢
sentry5.6.1.min.js:2 毛阿敏 - 迷雾之光
sentry5.6.1.min.js:2 胡夏 - 无人知晓的梦
sentry5.6.1.min.js:2 赵慧仙(선재) - I’m Missing You
sentry5.6.1.min.js:2 邓典果DDG、Sway X - Shake
sentry5.6.1.min.js:2 请夏 - X
sentry5.6.1.min.js:2 满舒克 - LOOK FOR ME
sentry5.6.1.min.js:2 AKA宝藏潮牛、侯志斌、宋文洋、飞鸟 - 恭喜恭喜
sentry5.6.1.min.js:2 告五人 - 唯一
sentry5.6.1.min.js:2 白安 - 白色
// 遍历图片地址
for(var dom of dd){
// console.log(dom.querySelector('span').innerText)  tittl的遍历
    console.log(dom.querySelector('img').src)
}
// 返回结果
https://p3fx.kgimg.com/mvpic/e4/52/e452cec897f538c33175898ad2defee9.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/f8/32/f832fa2620302e56c3b5b1eaf7c36465.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/27/9b/279bb84ef43c4fdd4efa5130da9b87c8.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/c8/e1/c8e1a89390563d657bd1517c4a28045c.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/9b/94/9b94490b6b552caeedd7d223dc1f5eb3.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/77/38/77385df8c26694b00b05a0a8de4f1658.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/36/df/36dfa43b933977a156c339952a19d18a.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/f7/f6/f7f6f90378a37c99e1ae4276c0aa1ae6.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/04/b8/04b8842e992ac3e0238d6288ea9c02c1.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/f0/a1/f0a1d2bc4cf81e7a5d43b1db1c031d65.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/e6/98/e698f5c8bd302ad40df62db0f7bada40.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/32/30/32307504ac798648bfeab2fec4f4a7d7.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/9f/88/9f88ed98b70c5672278d354dcf2369ff.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/f3/65/f3656fed44abafb029756069e1382710.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/22/b1/22b163165d8d56fc32b4f5e7ef9f83c6.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/74/50/7450435eb9422e5e310ab6458cfa2027.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/b6/68/b668bbd3e0297c3ceab669e947b2ad53.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/f1/3b/f13b3be997df7d886a98a31a67bfb7ba.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/db/d4/dbd47c443f6d34a062488e19cbc6b68b.jpg
sentry5.6.1.min.js:2 https://p3fx.kgimg.com/mvpic/80/5d/805d8eafe872fa45a6235b853f41171a.jpg
// 创建一个新的空数组
var data = []
// 遍历并赋值 同时添加到新数组内
for(var dom of dd){
    var tex = (dom.querySelector('span').innerText)
    var imga = (dom.querySelector('img').src)
data.push({tex,imga})
}
// 返回结果
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {tex: "多亮 - 剑震江湖", imga: "https://p3fx.kgimg.com/mvpic/e4/52/e452cec897f538c33175898ad2defee9.jpg"}
1: {tex: "江映蓉 - 依然", imga: "https://p3fx.kgimg.com/mvpic/f8/32/f832fa2620302e56c3b5b1eaf7c36465.jpg"}
2: {tex: "Sunnee杨芸晴 - 乘风破浪", imga: "https://p3fx.kgimg.com/mvpic/27/9b/279bb84ef43c4fdd4efa5130da9b87c8.jpg"}
3: {tex: "周深 - 归处", imga: "https://p3fx.kgimg.com/mvpic/c8/e1/c8e1a89390563d657bd1517c4a28045c.jpg"}
4: {tex: "Billie Eilish、ROSALÍA - Lo Vas A Olvidar", imga: "https://p3fx.kgimg.com/mvpic/9b/94/9b94490b6b552caeedd7d223dc1f5eb3.jpg"}
5: {tex: "By2 - 大红包", imga: "https://p3fx.kgimg.com/mvpic/77/38/77385df8c26694b00b05a0a8de4f1658.jpg"}
6: {tex: "萨顶顶 - 海底", imga: "https://p3fx.kgimg.com/mvpic/36/df/36dfa43b933977a156c339952a19d18a.jpg"}
7: {tex: "Ty.、AnsrJ、Dj Chronic - 新西部爱情", imga: "https://p3fx.kgimg.com/mvpic/f7/f6/f7f6f90378a37c99e1ae4276c0aa1ae6.jpg"}
8: {tex: "刘若英 - 黄金年代", imga: "https://p3fx.kgimg.com/mvpic/04/b8/04b8842e992ac3e0238d6288ea9c02c1.jpg"}
9: {tex: "张杰 - 像一道光", imga: "https://p3fx.kgimg.com/mvpic/f0/a1/f0a1d2bc4cf81e7a5d43b1db1c031d65.jpg"}
10: {tex: "吴琼 - 醉清欢", imga: "https://p3fx.kgimg.com/mvpic/e6/98/e698f5c8bd302ad40df62db0f7bada40.jpg"}
11: {tex: "毛阿敏 - 迷雾之光", imga: "https://p3fx.kgimg.com/mvpic/32/30/32307504ac798648bfeab2fec4f4a7d7.jpg"}
12: {tex: "胡夏 - 无人知晓的梦", imga: "https://p3fx.kgimg.com/mvpic/9f/88/9f88ed98b70c5672278d354dcf2369ff.jpg"}
13: {tex: "赵慧仙(선재) - I’m Missing You", imga: "https://p3fx.kgimg.com/mvpic/f3/65/f3656fed44abafb029756069e1382710.jpg"}
14: {tex: "邓典果DDG、Sway X - Shake", imga: "https://p3fx.kgimg.com/mvpic/22/b1/22b163165d8d56fc32b4f5e7ef9f83c6.jpg"}
15: {tex: "请夏 - X", imga: "https://p3fx.kgimg.com/mvpic/74/50/7450435eb9422e5e310ab6458cfa2027.jpg"}
16: {tex: "满舒克 - LOOK FOR ME", imga: "https://p3fx.kgimg.com/mvpic/b6/68/b668bbd3e0297c3ceab669e947b2ad53.jpg"}
17: {tex: "AKA宝藏潮牛、侯志斌、宋文洋、飞鸟 - 恭喜恭喜", imga: "https://p3fx.kgimg.com/mvpic/f1/3b/f13b3be997df7d886a98a31a67bfb7ba.jpg"}
18: {tex: "告五人 - 唯一", imga: "https://p3fx.kgimg.com/mvpic/db/d4/dbd47c443f6d34a062488e19cbc6b68b.jpg"}
19: {tex: "白安 - 白色", imga: "https://p3fx.kgimg.com/mvpic/80/5d/805d8eafe872fa45a6235b853f41171a.jpg"}
// 将data数组转为json字符串
JSON.stringify(data)
// 返回结果
// "[{"tex":"多亮 - 剑震江湖","imga":"https://p3fx.kgimg.com/mvpic/e4/52/e452cec897f538c33175898ad2defee9.jpg"},{"tex":"江映蓉 - 依然","imga":"https://p3fx.kgimg.com/mvpic/f8/32/f832fa2620302e56c3b5b1eaf7c36465.jpg"},{"tex":"Sunnee杨芸晴 - 乘风破浪","imga":"https://p3fx.kgimg.com/mvpic/27/9b/279bb84ef43c4fdd4efa5130da9b87c8.jpg"},{"tex":"周深 - 归处","imga":"https://p3fx.kgimg.com/mvpic/c8/e1/c8e1a89390563d657bd1517c4a28045c.jpg"},{"tex":"Billie Eilish、ROSALÍA - Lo Vas A Olvidar","imga":"https://p3fx.kgimg.com/mvpic/9b/94/9b94490b6b552caeedd7d223dc1f5eb3.jpg"},{"tex":"By2 - 大红包","imga":"https://p3fx.kgimg.com/mvpic/77/38/77385df8c26694b00b05a0a8de4f1658.jpg"},{"tex":"萨顶顶 - 海底","imga":"https://p3fx.kgimg.com/mvpic/36/df/36dfa43b933977a156c339952a19d18a.jpg"},{"tex":"Ty.、AnsrJ、Dj Chronic - 新西部爱情","imga":"https://p3fx.kgimg.com/mvpic/f7/f6/f7f6f90378a37c99e1ae4276c0aa1ae6.jpg"},{"tex":"刘若英 - 黄金年代","imga":"https://p3fx.kgimg.com/mvpic/04/b8/04b8842e992ac3e0238d6288ea9c02c1.jpg"},{"tex":"张杰 - 像一道光","imga":"https://p3fx.kgimg.com/mvpic/f0/a1/f0a1d2bc4cf81e7a5d43b1db1c031d65.jpg"},{"tex":"吴琼 - 醉清欢","imga":"https://p3fx.kgimg.com/mvpic/e6/98/e698f5c8bd302ad40df62db0f7bada40.jpg"},{"tex":"毛阿敏 - 迷雾之光","imga":"https://p3fx.kgimg.com/mvpic/32/30/32307504ac798648bfeab2fec4f4a7d7.jpg"},{"tex":"胡夏 - 无人知晓的梦","imga":"https://p3fx.kgimg.com/mvpic/9f/88/9f88ed98b70c5672278d354dcf2369ff.jpg"},{"tex":"赵慧仙(선재) - I’m Missing You","imga":"https://p3fx.kgimg.com/mvpic/f3/65/f3656fed44abafb029756069e1382710.jpg"},{"tex":"邓典果DDG、Sway X - Shake","imga":"https://p3fx.kgimg.com/mvpic/22/b1/22b163165d8d56fc32b4f5e7ef9f83c6.jpg"},{"tex":"请夏 - X","imga":"https://p3fx.kgimg.com/mvpic/74/50/7450435eb9422e5e310ab6458cfa2027.jpg"},{"tex":"满舒克 - LOOK FOR ME","imga":"https://p3fx.kgimg.com/mvpic/b6/68/b668bbd3e0297c3ceab669e947b2ad53.jpg"},{"tex":"AKA宝藏潮牛、侯志斌、宋文洋、飞鸟 - 恭喜恭喜","imga":"https://p3fx.kgimg.com/mvpic/f1/3b/f13b3be997df7d886a98a31a67bfb7ba.jpg"},{"tex":"告五人 - 唯一","imga":"https://p3fx.kgimg.com/mvpic/db/d4/dbd47c443f6d34a062488e19cbc6b68b.jpg"},{"tex":"白安 - 白色","imga":"https://p3fx.kgimg.com/mvpic/80/5d/805d8eafe872fa45a6235b853f41171a.jpg"}]"
// JSON字符串复制，去掉引号就可以使用