JavaScript替换指定类名img元素的src属性与class类名

你写的实现逻辑存在三处错误，无法正常运行：

• 选择器语法错误：匹配同时带有多个类的元素时，每个类名前都需要加.标识，类名之间不能加空格（空格代表匹配后代元素），你写的.page__overview-icon overview-icon--downtime会尝试查找类为page__overview-icon的元素下的<overview-icon--downtime>自定义标签，和目标img元素完全不匹配
• 属性操作错误：修改元素类名需要操作class属性，修改图片地址需要操作src属性，你调用的setAttribute("img", xxx)不存在对应有效属性，不会产生任何效果
• 覆盖范围不足：querySelector只会返回第一个匹配的元素，且仅执行一次，无法处理后续AJAX异步插入的DOM节点

抽离通用替换逻辑 #

先封装可复用的替换函数，支持指定查找范围，方便后续AJAX场景调用：

function replaceDowntimeIcon(container = document) {
  // 查找容器内所有符合条件的图标
  const downtimeIcons = container.querySelectorAll('.page__overview-icon.overview-icon--downtime');
  downtimeIcons.forEach(icon => {
    // 替换图片资源地址
    icon.src = 'degraded_large.png';
    // 替换类名：移除旧类，添加新类，不会误删元素上其他原有类
    icon.classList.remove('overview-icon--downtime');
    icon.classList.add('page__overview-icon--degraded');
  });
}

使用classList操作类比直接修改class属性更安全，不会覆盖元素上绑定的其他自定义类。

首屏加载处理 #

监听DOM加载完成事件，在首屏DOM渲染完成后先执行一次替换，处理初始加载的图标：

document.addEventListener('DOMContentLoaded', () => {
  replaceDowntimeIcon();
});

兼容AJAX动态内容 #

使用MutationObserver监听DOM树变化，自动处理后续AJAX插入的新节点，不需要在每个AJAX请求的回调中手动调用替换逻辑：

const domObserver = new MutationObserver(mutationList => {
  for (const mutation of mutationList) {
    if (mutation.addedNodes.length === 0) continue;
    for (const node of mutation.addedNodes) {
      // 跳过纯文本、注释等非元素节点
      if (node.nodeType !== Node.ELEMENT_NODE) continue;
      // 新增节点本身就是目标图标，直接处理
      if (node.matches('.page__overview-icon.overview-icon--downtime')) {
        replaceDowntimeIcon(node.parentElement);
      } else {
        // 新增节点内部包含目标图标，在节点范围内查找替换
        replaceDowntimeIcon(node);
      }
    }
  }
});

// 启动监听，覆盖整个body下所有节点新增、子树变更
domObserver.observe(document.body, {
  childList: true,
  subtree: true
});

如果确定目标img元素上除了两个固定class没有其他自定义类，可以直接用setAttribute一次性修改class属性，减少API调用：

// 仅当img无其他额外class时使用
icon.setAttribute('class', 'page__overview-icon page__overview-icon--degraded');

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