如何使用JavaScript批量修改HTML中所有img标签的src属性？

根因说明 #

你原有代码里的[0]表示仅取document.getElementsByTagName("img")返回的DOM元素集合的第一项，因此只会修改页面第一张图片的src属性。要批量修改全部img标签，需要遍历整个元素集合逐一赋值。

实现代码 #

兼容全浏览器写法 #

// 先获取页面所有img元素的集合
var allImgs = document.getElementsByTagName("img");
// 循环遍历每一个元素修改src
for (var i = 0; i < allImgs.length; i++) {
    allImgs[i].src = "hackanm.gif";
}

现代浏览器简洁写法 #

如果不需要兼容IE等老旧浏览器，可以用更简洁的forEach语法：

// 将类数组的HTMLCollection转为真正的数组后遍历
Array.from(document.querySelectorAll("img")).forEach(img => {
  img.src = "hackanm.gif";
})

可选扩展 #

如果需要仅修改符合特定规则的图片，比如你示例中原来的src都带compman前缀，只想修改这部分图片，可以加判断条件过滤：

Array.from(document.querySelectorAll("img")).forEach(img => {
  // 仅当原src包含compman字符串时才修改
  if (img.src.indexOf("compman") !== -1) {
    img.src = "hackanm.gif";
  }
})

内容的提问来源于stack exchange，提问作者Abu Naaim Md. Montasir Rahman