以不精確的參數遍歷dom

我想在電子商務網站的產品頁面上抓取圖像src。以不精確的參數遍歷dom

我正在寫這個作爲一個書籤，所以我希望代碼儘可能普遍工作。

我注意到，在頂級電子商務網站（亞馬遜，bestbuy等）中，產品圖片標籤中只有兩個重複出現的因素：border=0和180<width&height<400。那麼我怎麼能寫一個選擇器，將給我的第一個img元素在頁面上沒有邊框和寬度&高度在180和400像素之間？或者有更好的方法來做到這一點？

P.S.因爲我試圖保持小書籤儘可能輕，我不想使用任何庫（jQuery的，yui等）

來源

2010-01-15 rashcroft23

您可能會發現，在編寫所有'純粹'JavaScript之後，您需要完成這個工作，它的大小與縮小的jQuery以及您自己的兩行或三行相同。 ... – Sam 2010-01-15 02:40:46

也許，但至少我不會在頁面上做醜陋的jQuery注入。（小書籤將在沒有jQuery的頁面上被點擊90％） – rashcroft23 2010-01-15 02:45:43

我不覺得我完全理解你的問題，但在這裏我反正去！

你的意思是這樣......

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屬性，當你說話的邊框，寬度和高度？

來源

2010-01-15 03:01:43

如果您不必支持未實現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); 
    } 
}

來源

2011-04-04 16:44:49

以不精確的參數遍歷dom

回答

相關問題