如何使用 Javascript 获取特定页面上的所有图像源答案

【问题标题】：How to get all the image sources on a particular Page using Javascript如何使用 Javascript 获取特定页面上的所有图像源
【发布时间】：2011-08-14 02:56:08
【问题描述】：

我正在使用一个简单的脚本来查找页面上的图像并获取其来源。

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

但是，当我在我的页面上编写此函数时，它只会找到第一张图像然后停止。让它在当前页面上打印所有图像 src 的最佳方法是什么？谢谢！

【问题讨论】：

"它只找到第一张图像" - document.getElementsByTagName("img")[0] mmm?
是的，即使页面上有多个图像，它也只会从特定页面获取一个图像 src。
@Andrey 试图将您的注意力放在[0] 上，您可以在那里获得数组的第一项。
当您调用document.getElementsByTagName("img") 时，您会得到一个包含所有IMG 元素的SRC 的元素数组，然后您可以使用此[0] 获得第一个元素的SRC。
你的问题是这样的：我在页面上拍摄第一张图片 ([0])，但是它只找到第一张图片。

标签： javascript image

【解决方案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;
}

【讨论】：

感谢这个 BalusC 但它没有加载任何 img src。
如果文档有图像，它应该可以正常工作。也许您误解了返回值？它返回一个数组。还是你运行得太早了？在window.onload 上执行此操作，或将脚本放在正文末尾，就在</body> 之前。
知道了！最后一件事：我用它在页面 img_find = img_find(); 上写 img url document.write('test'+img_find);但它会输出像这样的结果domain.com/image.png,http://www.domain.com/image.png 有没有办法打破它们？所以他们之间可能有一个中断。

【解决方案2】：

我在整个网络上搜索了此问题的解决方案，如果其他人搜索相同的内容，这可能会有所帮助。

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

意思是，搜索所有带有样式标签的图片（本例中为边框）并将所有边框设置为 E0FDA6（用于重置单个突出显示的图片），但我想它可以用于带有样式标签的所有内容。

Rg，安詹卡

【讨论】：

【解决方案3】：

它可以帮助你...

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

【讨论】：

如果你的代码格式正确会很有帮助。

【解决方案4】：

简单点：

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

【讨论】：

【解决方案5】：

在当前页面上打印（替换内容）：

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));

【讨论】：