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

Question

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

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

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

Answer 1

您确实告诉代码这样做。不要那样做。只需告诉它循环所有图像并将每个图像的 src 推入数组中，然后返回包含所有 src 的数组即可。

function img_find() {
    return Array.from(document.getElementsByTagName("img")).map(i => i.src);
}

或者当你还没有使用 ES6 时

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

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

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

可以按照以下步骤提取浏览器上特定页面的所有图像源：

1. 打开网页。
2. 右键单击页面并选择“Inspect”或按F12打开开发者工具。
3. 转到“控制台”选项卡
4. 根据您的要求粘贴以下 JS 代码，然后按 Enter 键查看结果。

JS-1：

var images = document.querySelectorAll('img'); 
var imagePaths = [];

images.forEach(function(img) {
imagePaths.push(img.src); 
});

console.log(imagePaths.join('\n'));

JS-2：

let imgSources = Array.from(document.getElementsByTagName('img')).map(img => img.src);
console.log(imgSources);

JS-3：

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

JS：4

const getImages = (el, includeDuplicates = false) => {
  const images = [...el.getElementsByTagName('img')].map(img =>
    img.getAttribute('src')
  );
  return includeDuplicates ? images : [...new Set(images)];
};

getImages(document, true);
// ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false);
// ['image1.jpg', 'image2.png', '...']

注意： 如果您想手动查找特定页面的每个图像源，请转到开发人员工具下的“源”选项卡。

Answer 6

让事情变得简单：

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