如何用MutationObserver监听span的selected类切换以控制div显隐？

MutationObserver 完全适合你的场景，它就是用来监听 DOM 元素属性、结构变化的原生 API。下面是修正后的完整代码，解决你遇到的正则错误，同时明确每一步的作用：

完整代码示例 #

// 1. 获取目标元素（替换成你实际的选择器，比如用id更精准）
const span2 = document.querySelector('span:nth-of-type(2)');
const controlDiv = document.querySelector('#your-control-div'); // 替换成要控制显示的div选择器

// 2. 定义类名变化后的处理逻辑
function handleClassChange(mutations) {
  mutations.forEach(mutation => {
    // 只处理class属性的变化
    if (mutation.attributeName === 'class') {
      // 用原生classList判断，比正则更可靠，避免匹配错误
      if (span2.classList.contains('selected')) {
        controlDiv.style.display = 'block'; // 显示div
      } else {
        controlDiv.style.display = 'none'; // 隐藏div
      }
    }
  });
}

// 3. 创建MutationObserver实例
const observer = new MutationObserver(handleClassChange);

// 4. 配置监听规则：只监听class属性的变化
const observerConfig = {
  attributes: true,
  attributeFilter: ['class'] // 只监听class属性，减少不必要的触发
};

// 5. 启动监听（这一步必须执行，否则不会生效）
observer.observe(span2, observerConfig);

关键说明 #

• 不需要额外调用：执行 observer.observe() 后，Observer 就会自动监听 span2 的 class 属性变化，一旦变化就会触发 handleClassChange 函数。
• 替换正则的原因：用 classList.contains('selected') 是原生方法，能准确判断元素是否包含目标类名，避免正则可能出现的匹配失误（比如元素有 selected-item 这类包含 selected 的类名时，正则会误判）。
• 停止监听：如果后续不需要监听了，可以调用 observer.disconnect() 停止观察。

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