无法修改getElementsByClassName返回的HTMLCollection元素innerHTML问题

你遇到的问题是两个原因共同导致的：

• getElementsByClassName返回的是实时更新的HTMLCollection集合，浏览器控制台打印引用类型值时是懒解析的：你执行console.log(ele)的那一刻，MUI（基于React）还没完成DOM渲染，集合里的对应元素要么还没挂载，要么内容是空的；等你手动在控制台点开打印结果查看属性时，页面已经渲染完成，所以你能看到innerHTML显示为"Some Text"，但代码运行到读取ele[0].innerHTML的同步阶段，元素实际还没渲染好，自然拿到空值。
• MUI组件的DOM是受React虚拟DOM统一管控的，就算你等DOM渲染完成后手动修改原生DOM的innerHTML，只要组件触发重渲染，你手动修改的内容就会被虚拟DOM的渲染结果直接覆盖，页面不会保留你的修改。

推荐方案：遵循React/MUI的开发规范 #

不要手动操作原生DOM，直接通过组件属性传值修改内容，这是最稳定、不会出现偶发失效的写法：

import Avatar from '@mui/material/Avatar';
import { useState } from 'react';

export default function AvatarDemo() {
  // 头像显示的文本存在组件状态中
  const [avatarContent, setAvatarContent] = useState("Some Text");

  const changeText = () => {
    // 需要修改内容时直接更新状态，页面会自动同步
    setAvatarContent("Changed Text");
  }

  return <Avatar>{avatarContent}</Avatar>
}

特殊场景必须手动操作DOM的方案 #

如果是第三方脚本注入等特殊场景、没法改React组件代码，注意两点即可：

1. 等DOM完全挂载完成后再获取、修改元素，不要在页面加载的同步阶段直接查DOM
2. 修改后尽量避免触发对应Avatar组件的React重渲染，否则修改会被覆盖

参考代码：

// 把DOM操作逻辑放到宏任务队列，等当前渲染队列执行完再运行
setTimeout(() => {
  // 用querySelector写法更直观，注意CSS选择器多类名是连着写、类名前加.
  const avatarEle = document.querySelector(".MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");
  if (avatarEle) {
    avatarEle.innerHTML = "Changed Text";
  }
}, 0);

补充：你之前用getElementsByClassName传空格分隔的类名参数的写法本身是正确的，这个方法的参数本来就要求空格分隔多个类名、匹配同时包含所有类名的元素；如果用querySelector则要遵循CSS选择器语法，不要搞混两种写法。

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