遍历getElementsByClassName返回的节点列表不生效该如何处理？

核心原因1：你被控制台的打印特性误导了 #

getElementsByClassName返回的是动态的HTMLCollection类数组对象，控制台打印这类引用类型时，不会保存打印瞬间的快照，只会存储引用。你点击展开控制台的siteAvatars时，动态渲染逻辑已经执行完、元素已经插入DOM了，所以你能看到里面有元素，但代码实际执行的那一刻，这些元素还没被渲染到DOM里，siteAvatars.length的值是0，不管是forEach还是for循环都不会触发执行。
你可以在获取集合后加一行console.log(siteAvatars.length)验证，执行时输出的长度一定是0。

核心原因2：HTMLCollection本身没有forEach方法 #

你第一段代码直接调用siteAvatars.forEach会直接报错，只是你可能没注意到控制台的报错信息，所以逻辑也不会执行。

解决步骤 #

1. 优先修复遍历逻辑
   把HTMLCollection转成普通数组再遍历，避免方法不兼容的问题，示例：

window.onload = function() {
  const siteAvatars = document.getElementsByClassName("siteavatar");
  // 转成普通数组
  Array.from(siteAvatars).forEach(siteAvatar => {
    const avatar = siteAvatar.querySelector(".avatar");
    if (avatar) avatar.src = "你的新图片地址";
  });
}

2. 解决异步渲染的执行时机问题
   如果转成数组后还是不执行，就说明window.onload触发时动态元素还没渲染，不要依赖window.onload，改用MutationObserver监听DOM变化，等元素插入后再执行逻辑：

// 监听body的DOM变化，也可以替换成.siteavatar的直接父容器，减少性能开销
const observer = new MutationObserver((mutations) => {
  const siteAvatars = document.getElementsByClassName("siteavatar");
  if (siteAvatars.length > 0) {
    // 拿到元素后停止监听
    observer.disconnect();
    Array.from(siteAvatars).forEach(siteAvatar => {
      const avatar = siteAvatar.querySelector(".avatar");
      if (avatar) avatar.src = "你的新图片地址";
    });
  }
});
// 开启监听：监听子元素增减，开启深层监听
observer.observe(document.body, { childList: true, subtree: true });

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