Question

我想在电子商务网站的产品页面上抓取图像src。

我将其作为书签进行编写，因此我希望代码尽可能普遍使用。

我注意到顶级电子商务网站（亚马逊，最佳购买网站）中的产品图片标签只有两个重复出现的因素：border=0和180<width&height<400。那么我怎么能写一个选择器，它会给我页面上第一个src元素的img没有边框和宽度＆amp;高度在180到400像素之间？或者有更好的方法吗？

P.S。因为我试图保持书签尽可能轻，我不想使用任何库（jquery，yui等）

Answer 1

我不觉得我完全理解你的问题，但我还是去了！

你的意思是......

function findYouImg() {
   var imgs = document.getElementsByTagName('img');
   for(var i=0; i<imgs.length; i++) {
      if(imgs[i].border=='' && imgs[i].width>180 && imgs[i].height<400 ) {
         return imgs[i];
      }
   }
}

或者当你谈到边框，宽度和高度时，你是在引用外部CSS属性吗？

Answer 2

如果您不必支持不实现document.evaluate的浏览器，另一种方法是查看您要支持的每个站点，创建一个唯一标识产品图像的XPATH表达式并使用基于域的查找：

var productImageXPath = (function() {
  var xpaths = {
    'amazon.com': "//img[@id='prodImage']",
    'bestbuy.com': "//div[@id='imagepreview']/img"
  };
  function endsWith(s1, s2) {
    return (s1.indexOf(s2) == s1.length - s2.length);
  };
  return function(host) {
    for (attr in xpaths) {
      if (endsWith(host, attr)) {
        return xpaths[attr];
      }
    }
    return null;
  };
})();
var xpath = productImageXPath(location.host);
if (xpath) {
  var img = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  if (img) {
    console.log(img.src);
  }
}

用不精确的参数来测量dom

2 个答案: