如何用JavaScript为多个无标识图片批量添加alt文本？

问题场景 #

无法直接修改HTML，目标图片没有id或类名，仅能通过role="presentation"属性定位。当前使用document.querySelector()只能为第一张图片设置alt文本，剩余43张无法生效；尝试过document.querySelectorAll()但未成功，需要实现批量设置。

相关HTML片段：

<div class="d-flex justify-content-start">
<button class="collapsible collapsed az-toggle" data-bs-toggle="collapse" href="#additional-info-35434414" aria-expanded="false" aria-controls="additional-info-35434414">
<span class="d-inline-flex rotate-n180 me-2 align-middle az-collapsible">
<img src="/web/assets/media/icons/duotune/arrows/arr072.svg" role="presentation">
</span>

当前失效的代码：

var imageElement = document.querySelector("[role=presentation]");

if (imageElement) {
  imageElement.alt = 'Additional info arrow';
}

解决方案 #

document.querySelectorAll()会返回一个NodeList（节点列表），而非单个元素，必须遍历列表中的每个元素才能批量设置alt属性。

现代浏览器方案（推荐） #

使用forEach直接遍历NodeList：

// 获取所有符合条件的图片
const imageElements = document.querySelectorAll("[role=presentation]");

// 逐个设置alt文本
imageElements.forEach(img => {
  img.alt = 'Additional info arrow';
});

兼容旧浏览器方案（如IE） #

如果需要兼容不支持NodeList.forEach的浏览器，使用普通for循环：

const imageElements = document.querySelectorAll("[role=presentation]");

for (let i = 0; i < imageElements.length; i++) {
  imageElements[i].alt = 'Additional info arrow';
}

说明 #

之前使用querySelectorAll未成功，核心原因是没有对返回的节点列表做遍历操作——直接对NodeList设置alt属性是无效的，必须针对列表中的每个元素单独赋值。

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