如何使用JavaScript以编程方式修改无唯一标识图片的src属性

现有代码 #

HTML结构

<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />

JavaScript路径数组

var images = ['img11.jpg', 'img22.jpg','img33.jpg','img44.jpg'];

解决方案 #

只需获取页面中所有目标img元素，再按顺序将数组内的路径赋值给对应元素的src属性即可，以下是两种常用实现方式：

方法1：querySelectorAll结合forEach循环

// 获取页面中所有img元素
const imgElements = document.querySelectorAll('img');

// 遍历元素，按索引匹配数组路径
imgElements.forEach((img, index) => {
  // 增加判断，避免数组长度不足时赋值undefined
  if (images[index]) {
    img.src = images[index];
  }
});

方法2：传统for循环

// 获取页面中所有img元素集合
const imgElements = document.getElementsByTagName('img');

// 遍历元素集合，匹配数组路径
for (let i = 0; i < imgElements.length; i++) {
  if (images[i]) {
    imgElements[i].src = images[i];
  }
}

注意事项 #

• 尽量保证图片数组长度与目标img元素数量一致，或者保留代码中的索引判断，避免因数组长度不足导致无效赋值。
• 如果页面存在其他不需要修改的img元素，可以通过父容器选择器缩小范围，比如document.querySelectorAll('.target-container img')（需给目标img的父容器添加对应class）。

内容的提问来源于stack exchange，提问作者Des Tini