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字元串複制，去掉引号就可以使用