如何使用 Javascript 獲取特定頁面上的所有圖像源

Question

我正在使用一個簡單的腳本來查找頁面上的圖像並獲取其來源。

function img_find() {
    var img_find2 = document.getElementsByTagName("img")[0].src;
    return img_find;
}

但是，當我 go 在我的頁面上編寫此 function 時，它只會找到第一張圖像然后停止。 讓它在當前頁面上打印所有圖像 src 的最佳方法是什么？ 謝謝！

Answer 1

您確實告訴代碼這樣做。 不要那樣做。 只需告訴它遍歷所有圖像並將每個圖像的 src 推送到一個數組中，然后返回包含所有 src 的數組。

function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }

    return imgSrcs;
}

Answer 2

它可能會幫助你...

img=document.getElementsByTagName("img");
for(i=0; i<img.length; i++) {
    imgp = imgp + img[i].src + '<br/>'; 
}
document.write(imgp);

Answer 3

我搜索了整個 web 以尋找解決方案，如果其他人搜索相同的內容，這可能會有所幫助。

for(var i = 0; i< document.images.length; i++){
document.images[i].style.border = "1px solid #E0FDA6";
}

意思是，搜索所有具有樣式標簽的圖像（在本例中為邊框）並將所有邊框設置為 E0FDA6（用於重置單個突出顯示的圖像），但我想它可以用於帶有樣式標簽的所有內容。

Rg，安揚卡

Answer 4

在當前頁面上打印（替換內容）：

document.write(`<pre>${JSON.stringify(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src), null, 2)}</pre>`);

要保存在數組中：

const imgs = Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src);

直接控制台目錄/日志：

console.dir(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src));
console.log(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src));

Answer 5

讓它簡單：

console.log(document.body.getElementsByTagName('img'));