作者：克林

背景：

有个客户需要下载某东的商品详情所有图片，这里给大家分析一下要怎么做。写个通用的来下载任一商品的所有详情图。

分析：

通过f12看到商品详情图的url有两种，一种是单纯的img标签，另外一种是在div的style属性。

这里用xpath能提取到img标签，最外层div为id = detail的一个标签。

另一种是在一个class为ssd-module-wrap的大标签里，不直接显示在标签属性里，可以写个js去提取。

实现：

新建一个url_list来存储所有的url，然后再统一去调用http请求去下载。

img标签里的url，直接用获取相似元素列表去做。

计算后样式标签，先通过ssd-module-wrap定位到最外层那个div，再获取所有子元素。

细节：

1.只匹配class为ssd-module-wrap且没有其他类名的<div>元素，可以使用CSS选择器的:not()伪类来排除具有其他类名的元素。

2.使用JavaScript中的getComputedStyle()方法。这个方法可以获取计算后的样式信息，包括从CSS规则中继承和应用的样式。

3.商品详情需要加载，加一个瞬间滚动网页到底部指令。

影刀完整js代码：

function (element, input) {

var parentElement = document.querySelector('.ssd-module-wrap:not([class*=" "])');

if (parentElement === null) {
    return []; 
  }

var children = parentElement.children;
var url_list = [];

for (var i = 0; i < children.length; i++) {
  var styles = getComputedStyle(children[i]);
  var backgroundImage = styles.backgroundImage;
  var url = backgroundImage.match(/url\("(.+)"\)/)[1];
  url_list.push(url );
  
}
return url_list;
}

影刀完整指令：

效果：