使用不精确的参数遍历dom

Question

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

我将这篇文章作为一个bookmarklet来编写，所以我希望代码能尽可能地通用。

我注意到，在顶级电子商务网站(亚马逊、百思买等)中，产品形象标签中只有两个重复出现的因素：border=0和180<width&height<400。那么，我如何编写一个选择器来给出页面上第一个img元素的src，并且没有边框，宽度和高度介于180和400px之间？或者有没有更好的方法来做到这一点？

另外，由于我尽量保持bookmarklet的轻量级，所以我不想使用任何库(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);
  }
}