Javascript 循环浏览页面上的所有图像

2个问题：

在给定页面上循环浏览所有图像并在新选项卡中打开每个图像的最常用方式是什么

相同的想法，但在一个新的标签打开，我想推不同的图像，而不是给定的。这个想法是建立一个小部件，将注入猫的照片，而不是正常的网站照片

---

我在代码中回答了2，在第一个代码块的注释中回答了1

var allImages = document.getElementsByTagName('img');

for(var i = 0; i < allImages.length ; i++) {
  // to open all photos in new tabs:
  // window.open(allImages[i].src, '_blank');
  allImages[i].src = 'url_to_cat_image';
}

---

如果希望每张照片都是不同的图像，只需将

url\u to\u cat\u图像

替换为在第一个代码块中返回随机cat图像的函数即可。对于jquery，您可以使用

。每个
和一个随机的cat url函数。
这就是您循环浏览页面中所有图像的方式。
我还添加了在新选项卡中打开或替换源的示例。
使用本机JavaScript不需要依赖项

// Array of cat photos
var arr = ['cat1.jpg', 'cat2.jpg', 'cat3.jpg'....]

var elem = document.getElementsByTagName('img');
for (var i = 0; i < elem.length; i++) {
    var src = elem[i].getAttribute('src');

    // Open in a new tab
    if (src) window.open(src);

    // Replace with a random cat photo
    elem[i].src = arr[Math.floor(Math.random() * arr.length)];
}

//cat照片数组
var arr=['cat1.jpg'、'cat2.jpg'、'cat3.jpg'…]
var elem=document.getElementsByTagName（'img'）；
对于（变量i=0；i
使用普通javascript：

var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
  var image = images[i];
  window.open(image.src,"_blank");
}

// changing for a kitty image
var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
   var image = images[i];
   image.src = "http://placekitten.com/600/338";
}

var images=document.querySelectorAll（“img”）；
对于（var i=0；i

但是，如果有多个图像，浏览器将阻止该操作（请参阅弹出消息并允许该操作）。
下面是一种使用vanilla js的方法。如注释中所述，使用
document.images
节点列表是获取图像的最佳方法，因为它是一个静态列表，不需要组装以响应dom查询

如前所述，浏览器将阻止打开新窗口的尝试，并将其标记为弹出窗口

下面是一个演示：


函数forEachNode（节点列表，func）{
对于（var i=0，n=nodeList.length；i

打开弹出窗口，更改图像源
重置


注意：除了人们向您展示如何获取所有图像的引用的所有其他方法外，您还可以使用
document.images
-这比任何其他方法都更快、更有效，因为图像“数组”（实际上是节点列表）已经存在-无需在dom中搜索它们。；）
var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
  var image = images[i];
  window.open(image.src,"_blank");
}

// changing for a kitty image
var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
   var image = images[i];
   image.src = "http://placekitten.com/600/338";
}