如何精准定位md-menu内元素并移除md-focused类？

我来帮你搞定这个md-menu的类操作问题～ 你遇到的核心问题是md-menu的容器是动态创建的——只有点击触发按钮后才会插入到DOM里，所以页面刚加载时直接获取肯定是空数组。下面给你两种解决方案，从优雅到通用的都有：

方案一：精准关联触发按钮与对应菜单（推荐） #

这种方式能直接定位到当前点击按钮对应的菜单，不会误操作其他菜单。步骤如下：

1. 给每个触发按钮和对应的菜单加个匹配的标识（比如用data-*属性或者ID关联）：

<!-- 触发按钮加data-menu-id，和对应菜单的ID一致 -->
<md-button md-menu-trigger-for="userMenu" data-menu-id="userMenu">用户菜单</md-button>
<md-menu id="userMenu">
  <md-menu-content>
    <md-menu-item><md-button>个人中心</md-button></md-menu-item>
    <md-menu-item><md-button>退出登录</md-button></md-menu-item>
  </md-menu-content>
</md-menu>

<md-button md-menu-trigger-for="settingsMenu" data-menu-id="settingsMenu">设置菜单</md-button>
<md-menu id="settingsMenu">
  <md-menu-content>
    <md-menu-item><md-button>主题设置</md-button></md-menu-item>
    <md-menu-item><md-button>账号绑定</md-button></md-menu-item>
  </md-menu-content>
</md-menu>

2. 监听菜单的md-open事件（Angular Material自带的菜单打开事件），在事件中直接获取当前菜单的容器并移除类：

// 遍历所有md-menu元素，绑定打开事件
document.querySelectorAll('md-menu').forEach(menu => {
  menu.addEventListener('md-open', function() {
    // 获取当前菜单的容器元素
    const menuContainer = this.querySelector('.md-open-menu-container');
    if (!menuContainer) return;

    // 移除容器本身的md-focused类（如果需要）
    menuContainer.classList.remove('md-focused');
    // 移除菜单内被选中的项的md-focused类
    const focusedItem = menuContainer.querySelector('.md-focused');
    if (focusedItem) {
      focusedItem.classList.remove('md-focused');
    }
  });
});

方案二：遍历所有已打开的菜单容器（通用 fallback） #

如果没法给菜单加标识，或者需要批量处理所有菜单，可以用「监听DOM变化」或者「点击后延迟获取」的方式：

方式A：用MutationObserver监听动态创建的菜单容器

这种方法能自动捕获所有新添加到DOM的菜单容器，不用依赖点击事件：

// 创建DOM变化监听器
const menuObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新添加的节点
    mutation.addedNodes.forEach(node => {
      // 判断是不是菜单容器
      if (node.classList?.contains('md-open-menu-container')) {
        // 移除目标类
        node.classList.remove('md-focused');
        const focusedItems = node.querySelectorAll('.md-focused');
        focusedItems.forEach(item => item.classList.remove('md-focused'));
      }
    });
  });
});

// 开始监听body下的所有子节点变化
menuObserver.observe(document.body, {
  childList: true,
  subtree: true
});

方式B：点击触发按钮后延迟获取

因为菜单容器是异步创建的，所以点击后稍等再获取就能拿到：

document.addEventListener('click', (e) => {
  // 判断点击的是菜单触发按钮
  const triggerBtn = e.target.closest('[md-menu-trigger-for]');
  if (!triggerBtn) return;

  // 用requestAnimationFrame等待菜单容器创建完成
  requestAnimationFrame(() => {
    const allMenuContainers = document.querySelectorAll('.md-open-menu-container');
    allMenuContainers.forEach(container => {
      container.classList.remove('md-focused');
      container.querySelectorAll('.md-focused').forEach(item => item.classList.remove('md-focused'));
    });
  });
});

关键说明 #

为什么一开始getElementsByClassName返回空？因为Angular Material的md-menu容器是按需创建的——只有用户点击触发按钮时，才会把菜单容器插入到DOM中；关闭菜单后容器不会销毁，但初始状态下确实不存在，所以必须在菜单创建完成后再去获取。

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