document.getElementsByTagName（'img'），如何獲取png圖片？

Question

我想只得到從dom的png屬性的圖像，有誰知道如何做到這一點？

Answer 1

遍歷圖像，並返回那些具有SRC財產以.png結尾：

var images = document.images; 
var pngs = []; 
for (var i=0, iLen=images.length; i<iLen; i++){ 
    if (/\.png$/i.test(images[i].src)) 
    pngs.push(images[i]); 
} 

PNG格式是其圖像陣列SRC以.png結束，將在工作幾乎每個支持腳本的瀏覽器。

如果你想要的東西，使用querySelectorAll（如果可用）和一個簡單的循環在圖像如果不是，那麼下面應該（每lonesomeday的ansewr）適合：

function getPngs() { 

    if (document.querySelectorAll) { 
    return document.querySelectorAll('img[src*=".png"]'); 
    } 

    var images = document.images; 
    var pngs = []; 
    var re = /\.png$/i; 
    for (var i=0, iLen=images.length; i<iLen; i++){ 
    if (re.test(images[i].src)) { 
     pngs.push(images[i]); 
    } 
    } 
    return pngs; 
} 

你可能會得到一個節點列表或數組，但如果你想要做的只是遍歷它，那就沒關係。否則，您需要將qSA fork的結果轉換爲一個數組，這是幾行代碼。

Answer 2

沒有安全的方法來做到這一點。瀏覽器不會在任何地方展示哪種類型的圖像已經被加載。此外，你甚至不能保證圖片的URL將有正確的文件擴展名，因爲http://example.com/some/image是一個非常有效的URL。

你可以使用一個近似「屬性包含」 CSS選擇器與querySelectorAll與支持它的瀏覽器：

var pngs = document.querySelectorAll('img[src*=".png"]'); 

那找到所有img元素與.png某處他們src屬性。請注意，這是容易受到誤報和漏報。

此方法在IE 7或更低版​​本中不起作用。